Html 非固定标题下的固定导航栏

我的网站由四个

div

s组成；它们的顺序是：

页眉

，

导航栏

，

主

，和

页脚

我希望页眉保持在原位，导航栏位于页眉下方，但当页面滚动时，我只希望导航栏保持在顶部

我现在使用的代码（）的结果是导航条粘在顶部，但在标题的顶部。当我将顶部设置为收割台的高度（将导航栏放置在收割台下方）并向下滚动时，有一个与收割台一样宽的间隙，导航栏不会粘到顶部

有没有办法在纯CSS中解决这个问题？我没有使用Bootsrap，虽然我在使用JS或JQuery方面没有问题，但我在使用这两个方面都没有任何经验。

我做了一些调整，让头球和导航杆保持在原位。这就是你想要的吗？让我知道，我们可以进一步调整它

---

您可以更改高度设置，我刚刚将它们变小以进行测试

这个问题以前被问过。我将（几乎一字不差地）在这里转载另一个用户的答案。它不仅仅是CSS，它也是javascrpt和jquery的混合体。但别担心。下面是一段youtube视频，帮助您在页面中实现jquery

函数moveScroller（）{
var move=function（）{
var st=$（window.scrollTop（）；
var ot=$（“#滚动锚”）.offset（）.top；
var s=$（“#滚动条”）；
如果（st>ot）{
s、 css({
位置：“固定”，
顶部：“0px”
});
}否则{
如果（st要在滚动条上获得仅包含HTML和CSS的粘性导航栏，您必须制作两个导航栏，一个在顶部，一个在底部。

顶部的一个是“粘性”的，位于收割台后面，而另一个像普通的一样放在收割台下面，不粘性


正文{
保证金：0；
填充：0；
}
#粘的{
z指数：-1；
位置：固定；
填充：1em；
宽度：100%；
背景：#000；
颜色：#fff；
}
标题{
填充：50px；
文本对齐：居中；
字体大小：粗体；
背景：#4b3621；
颜色：#fff；
}
导航{
边缘底部：2000px；
填充：1em；
背景：#000；
颜色：#fff；
}

粘性导航条

标题
无粘性导航条

我认为使用纯css是不可能的，但是你可以使用jQuery来修复它@PranavCBalan我想这是必须的；谢谢！我想让导航贴在顶部；尽管有jQuery，Pranav的评论对我来说很有用——谢谢你的尝试！
#navbar {
  /* BASE CODE */
  position: fixed;
     margin-top: 50px;    
  z-index: 10;
  width: 960px;
  height: 10px;
  /* STYLING */
  background: yellow;
}

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: ""
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}




<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>