想要在 js 越过某个位置时更改设置

Question

我正在创建一个导航栏，我正在为此使用引导程序。

当我的导航是透明的时，我使用填充顶部 60px

这是我的导航代码

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

还有我的导航栏品牌类

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

now when the navbar scrolls > 100 it looks like this

现在我想在滚动 > 100 时将其设为 30px 这是我的 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"
             });
     });
});