想要在js中更改設置，而它穿過某個位置

Question

我正在創建導航條&我正在使用這個引導程序。

我使用的填充頂部60像素，而我的資產淨值是透明

這裏是我的導航代碼

.navbar-default .navbar-nav > li > a { 
    padding-top: 60px; 
} 

和我的導航欄，品牌類

.navbar-brand{ 
    padding-top:30px; 
} 

now when the navbar scrolls > 100 it looks like this 

現在我希望把它30PX當滾動> 100這裏是我的js代碼

var a = $(".navbar-default").offset().top; 
$(document).on('scroll', function() { 
if ($(this).scrollTop() > 100) { 
    $('.navbar-default').addClass("scrolled"); 
    $(".navbar-default .navbar-brand").css({ 
     "color": "#a96258" 
    }); 
} 
else { 
    $('.navbar-default').removeClass("scrolled"); 
    $(".navbar-default .navbar-brand").css({ 
     "color": "#fff" 
    }); 
    } 
}); 

我的滾動類

.navbar-default.scrolled{ 
    background-color: #fff; 
    border-bottom: 1px solid #BBB9BE; 
    box-shadow: 0,0,2px,#BBB9BE; 
    color: #000; 
    min-height: 80px; 
} 

Answer 1

嘗試將其連接到window.scroll如下：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 100) { 
     $('.navbar-default').addClass("scrolled"); 
     $(".navbar-default .navbar-brand").css({ 
     "color": "#a96258" 
    }); 
    } 
    else { 
    $('.navbar-default').removeClass("scrolled"); 
    $(".navbar-default .navbar-brand").css({ 
     "color": "#fff" 
    }); 
    } 
}); 

或者您也可以添加一個事件監聽器，如下所示

var element = $(".navbar-default"); 
window.addEventListener('scroll', function() { 
    $(window).scrollTop() > 100 ? 
    $(element).addClass('scrolled',function(){ 
      $(".navbar-default .navbar-brand").css({ 
        "color": "#a96258" 
      }); 
    }) : 
    $(element).removeClass('scrolled',function(){ 
      $(".navbar-default .navbar-brand").css({ 
        "color": "#fff" 
      }); 
    }); 
});