Javascript 在滚动以确定其位置时捕捉div

我试图有一个固定的垂直导航栏，但只有当用户向下滚动到它。我已经把它放在我的标题下66px，一旦用户向下滚动到它的66px边距并在屏幕上保持固定，它就需要被捕获。我很接近，但正如你所看到的，它并不完美。

---

这段代码（由Mathias W改进）在某种程度上起作用，当我们向上滚动时，它需要重置到以前的位置。

您必须应用css属性位置，并将其值设置为fixed（位置：fixed）

参见小提琴：

如果您只想在滚动时到达元素后“捕获”，可以使用$（'#navbox'）.offset（）.top检查navbox的偏移位置

---

更新接受的答案 将导航框的顶部偏移保存为变量，然后检查窗口的scrollTop值是否小于或大于该值

var navboxHeight = $('#navbox').offset().top;
$(window).on('scroll', function() {
    if($(window).scrollTop() > navboxHeight){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
    // Reset navbox to it's default position
    if($(window).scrollTop() < navboxHeight){
        $('#navbox').css({
            'top': '',
            'position': 'static'
        });
    }
});

var navboxHeight=$（'#navbox'）.offset（）.top；
$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（）>navboxHeight）{
$（'#navbox'）.css({
'top'：$（窗口）.scrollTop（）>0？'0px'：'66px'，
“位置”：“固定”
});
}
//将导航框重置为其默认位置
如果（$（窗口）.scrollTop（）

catch my navigation bar（捕捉我的导航栏）是什么意思？似乎在滚动时需要调整菜单，因此需要相应地使用position fixed。我想你需要这个，对吗？对不起，我写这篇文章的时候有点累，这有点难以解释。是的，很相似，但有点不同。导航卫星的基础永远不会改变它的位置，只有当我们向下滚动才能捕捉到它的时候。它需要总是在那个黑匣子下66px，但一旦从屏幕顶部的滚动中捕捉到66px。。只是想看看我是否明白。。。红色的盒子应该比黑色的盒子或窗口的顶部低66px，以较大者为准，任何时候都可以。我感谢帮助人员，非常接近。对不起，我写这篇文章时很累，需要更清楚一些。它需要始终在黑匣子下66px，一旦向下滚动以捕捉它，它就在屏幕下66px。因此，即使你滚动到顶部，它也会被释放，明白我的意思吗？有点难以解释，你就是那个人。非常感谢：）…不相关的问题。你在哪里学会写javascript的？我需要好好学习。没问题，伙计：）我只是在实践中自学。我确实没有任何我从中学到最多的知识来源，但我认为CodeCodemy和codeschool是非常可靠的网站。你只要提出一个想法，然后尝试去创造它，你就会学到很多。是的，这也是我学习html/css知识的方式，一旦你掌握了基本知识，你就会从中提高知识。一旦这个项目完成了，我会努力的，干杯：）。

$(window).on('scroll', function() {
  $('#navbox').css({
      'top': $(window).scrollTop() > 0 ? '0px' : '66px',
      'position': 'fixed'
      });
});

$(window).on('scroll', function() {
    if($(window).scrollTop() > $('#navbox').offset().top){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
});

var navboxHeight = $('#navbox').offset().top;
$(window).on('scroll', function() {
    if($(window).scrollTop() > navboxHeight){
        $('#navbox').css({
            'top': $(window).scrollTop() > 0 ? '0px' : '66px',
            'position': 'fixed'
        });
    }
    // Reset navbox to it's default position
    if($(window).scrollTop() < navboxHeight){
        $('#navbox').css({
            'top': '',
            'position': 'static'
        });
    }
});