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

Question

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

我使用 padding top 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

现在我想在滚动时将其设置为 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"
             });
     });
});