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

ccc 发表于 Dev

抄送

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

马蒂亚斯·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'
        });
    }
});