在滚动时创建粘性标题，固定位置会破坏标题答案

【问题标题】：Creating a sticky header on scroll, position fixed breaks the header在滚动时创建粘性标题，固定位置会破坏标题
【发布时间】：2017-07-14 07:15:41
【问题描述】：

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

当我将位置固定到标题时，当它需要变得粘性时，它会从包装器中溢出，我希望它保持当前形式并坚持到顶部，我已经尝试了很多不同的方法来对此进行编码，但尚未找到解决方案。

当您在此页面上滚动时，请明白我的意思：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');
    }
  });
});

【问题讨论】：

您可能想在其中添加一个 z-index 以使其高于一切。
红框溢出，你能看到网站吗

标签： javascript jquery html css position

【解决方案1】：

Position Fixed 会使元素占据整个页面宽度，

相应地修改你的 CSS

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

希望这会有所帮助..

【讨论】：