Javascript 在滚动上创建粘性页眉时，“位置固定”会打断页眉

我在卷轴上制作了一个粘性标题，所以当标题栏到达页面顶部时，它会粘在那里。我遇到的问题是需要固定位置才能使其粘贴到页面顶部

当我将position fixed应用于标题时，当它需要变为粘性时，它会从包装器溢出，我希望它保持当前的形式并保持在顶部，我已经使用了很多不同的方法来编写代码，但还没有找到解决方案

当您在本页上滚动时，请了解我的意思： （带红色边框的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>

JS:

/*粘性标题*/
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>200）{
$（'.compare1_fixed'）.addClass（'compare1_fixed_fixed'）；
}
if（$（窗口）.scrollTop（）<201）{
$（'.compare1_fixed_fixed'）.removeClass（'compare1_fixed_fixed'）；
}
});
});

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

相应地修改CSS

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

---

希望这有帮助。

您可能希望在其中添加一个z索引，使其高于一切。尽管红色边框溢出，您仍能看到该网站吗

/* 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');
    }
  });
});

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