Question

我正在构建一个网站，在向下滚动（500px）之后以静态导航栏开始，该功能将删除该类＆＃34; navbar-static-top＆＃34;并添加＆＃34; navbar-fixed-top＆＃34;。哪个工作正常。但是当用户滚动回顶部时，我想让它变回静态。我无法在网上找到任何关于它的信息，我尝试过使用jQuery＆＃39; hasClass（）＆＃39;功能，但这也不起作用......任何想法？

这就是我现在所拥有的......

   $(window).scroll(function() {
    $('#navbarMain').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();

        if (imagePos > topOfWindow-500) {
            $(this).removeClass("navbar-static-top");
            $(this).addClass("navbar-fixed-top");
        }

    });
});

Answer 1

我正在使用

$(window).scroll(function() {
    var nav = $('#navbarMain');
    var top = 200;
    if ($(window).scrollTop() >= top) {

        nav.addClass('fixed');

    } else {
        nav.removeClass('fixed');
    }
});

Answer 2

var mainbottom = $('#navbarMain').offset().top + $('#navbarMain').height();

$(window).on('scroll',function(){ 
  stop = Math.round($(window).scrollTop()); 
  if (stop > mainbottom) { 
     $('.navbar-static-top').addClass('navbar-fixed-top'); 
  } else { 
     $('.navbar-static-top').removeClass('navbar-fixed-top'); 
  } 
});

Answer 3

您是否尝试在else内再次更改课程？这样的事情应该有效：

if (imagePos > topOfWindow-500) {
    $(this).removeClass("navbar-static-top");
    $(this).addClass("navbar-fixed-top");
} else {
    $(this).addClass("navbar-static-top");
    $(this).removeClass("navbar-fixed-top");
}

根据滚动位置添加和删除Bootstrap导航栏类

3 个答案: