在滚动上创建粘性标头，固定位置会破坏标头

Question

我在滚动时制作了一个粘性标头，因此，当标头栏到达页面顶部时，它将粘贴在那里。 我遇到的问题是位置固定，该位置使它固定在页面顶部。

当我需要固定在标题上的位置使其变粘时，它从包装器溢出，我希望它保持其当前形式并仅停留在顶部，我尝试了许多不同的方式对此进行编码，尚未找到解决方案。

请在滚动此页面时明白我的意思： http : //cameras.specced.co.uk/compare/297/Fujifilm_FinePix_XP80 （带有红色边框的div是我想要保留的顶部）

HTML：

<!-- FIXED HEADER -->
<div class="container">
    <div class="row">
        <div class="compare1_fixed">
            <div class="compare1_fixed_score">
            </div>
            <div class="compare1_fixed_name">
                <?php echo $brand['brand'] . " " . $model['model'] . " " . "Specifications"; ?>
            </div>
            <div class="compare1_fixed_social">
                <div class="compare1_fixed_social_icon">
                    <a href="http://google.com">
                        <img src="http://specced.co.uk/images/ui/facebook.png">
                    </a>
                    <a href="http://google.com">
                        <img src="http://specced.co.uk/images/ui/twitter.png">
                    </a>
                    <a href="http://google.com">
                        <img src="http://specced.co.uk/images/ui/google.png">
                    </a>
                    <a href="http://google.com">
                        <img src="http://specced.co.uk/images/ui/email.png">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.compare1_fixed {
    width:100%;
    height:50px;
    clear: both;
    border:1px solid red;
}

. compare1_fixed_fixed {
    position:fixed;
}

.compare1_fixed_score {
    width:200px;
    height:50px;
    float: left;
    background-color:#222222;
}

.compare1_fixed_social {
    width:200px;
    height:50px;
    float:right;
}

.compare1_fixed_social_icon {
    display: inline-block;
}

.compare1_fixed_social_icon img {
    max-height: 50px;
    max-width: 50px;
    float: left;
}
.compare1_fixed_social_icon img:hover {
    opacity:.7;
}


.compare1_fixed_name {
    width:calc(100% - 400px);
    height:50px;
    display: inline-block;
    line-height: 50px;
    font-size:18px;
    font-weight: 600;
    padding-left:10px;
}

JS：

/* STICKY HEADER */
$(document).ready(function() {

  $(window).scroll(function () {

      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 200) {
      $('.compare1_fixed').addClass('compare1_fixed_fixed');
    }
    if ($(window).scrollTop() < 201) {
      $('.compare1_fixed_fixed').removeClass('compare1_fixed_fixed');
    }
  });
});

Answer 1

固定位置将使元素占据整个页面宽度，

相应地修改CSS

  .compare1_fixed_fixed {
        position: fixed;
        top: 50px;
        width: 87%;
        z-index: 5;
        background-color: #fff;
    }

希望这可以帮助..