我正在尝试有一个固定的垂直导航栏,但是仅当用户向下滚动到该栏时。我将其放置在标题下为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改进)可以正常工作,当我们向上滚动时,需要将其重置为先前的位置。

最佳答案

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

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

09-10 07:32
查看更多