根據滾動位置添加和刪除Bootstrap導航欄類

Question

我正在建立一個網站，向下滾動（500px）后，它會以靜態導航欄開頭，該功能將刪除類“ navbar-static-top”並添加“ navbar-fixed-top”。 哪個工作正常。 但是，當用戶滾動到頂部時，我想使它變回靜態。.我在網上找不到任何有關它的信息，我已經嘗試使用jQuery的“ hasClass（）”函數，但這不起作用或者...有什么想法嗎？

這就是我現在所擁有的..

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