javascript - 滚动时捕获一个 div 以固定其位置

Question

我试图有一个固定的垂直导航栏，但只有在用户向下滚动到它时才会出现。我将它放在我的标题下 66px，一旦用户向下滚动到它的 66px 边距并保持固定在屏幕上，它就需要被捕获，我很接近，但正如你所看到的，它并不完美。 https://jsfiddle.net/1krd9zpc/7/

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

这段代码(由 Mathias W 改进)可以正常工作，当我们向上滚动时它需要重置到之前的位置。

Answer 1

您必须应用 css 属性 position 并将其值设置为 fixed (position:fixed)。

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

参见 fiddle :

https://jsfiddle.net/3g52v5oh/

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

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

---

已接受答案的更新

将导航框的顶部偏移量保存到一个变量中，然后检查窗口的 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'
        });
    }
});