已接受答案的更新

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/

如果你只是想要抓住它＆＃34;一旦您在滚动时到达元素，您可以使用$（＆＃39; #navbox＆＃39;）来检查导航框的偏移位置.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'
        });
    }
});

在滚动时捕获div以固定其位置

1 个答案:

已接受答案的更新