滚动时捕获 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 属性位置并将其值设置为固定（位置：固定）。

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

见小提琴：

https://jsfiddle.net/3g52v5oh/

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

$(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'
        });
    }
});