向下滚动时将CSS类添加到div

Question

我想在带有LESS的Bootstrap 3网站中的菜单栏（＃secondary-menu）中添加一个css类（.shrink），当菜单向下滚动时达到75px的顶部位置时。 菜单栏使用sticky.js固定为75px。 但是，我想通过收缩类更改其外观。

不幸的是，我没有以当前形式使用我的jQuery代码。 收缩类是不断应用的。 CSS类单独起作用。

HTML：

<!-- service-nav -->
    <div id="service-nav" class="shrink">
      <div class="container-fluid">
        <div class="container text-center">
          <ul class="list-inline">
            <li><i class="fa fa-camera-retro fa-3x"></i><p>Test</p></li>
            <li><i class="fa fa-asterisk fa-3x"></i><p>Test</p></li>
            <li><i class="fa fa-comment fa-3x"></i><p>Test</p></li>
            <li><i class="fa fa-search fa-3x"></i><p>Test</p></li>
            <li><i class="fa fa-rocket fa-3x"></i><p>Test</p></li>
            <li><i class="fa fa-star fa-3x"></i><p>Test</p></li>
          </ul>   
        </div>
      </div>
    </div><!-- /.service-nav -->

减：

#service-nav {
    background: #000;

    width: 100%;

    li  {
        padding: 40px 60px 25px 60px;
        color: #808080;
    }

    i {
        display: block;
    }

    p {
        font-size: 16px;
        padding-top: 15px;
        letter-spacing: 1px;
    }   

    @shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.5);
    .box-shadow(@shadow);
}

.shrink {

    li {
        padding: 0px 0px 0px 0px;
    }

    i {
        font-size: 30px;
    }

    p {
        display: none;
    }
}

jQuery的

$(window).scroll(function() {    
    $("#service-nav").removeClass("shrink");
    var scroll = $(window).scrollTop();
    if (scroll <= 75) {
        $("#service-nav").addClass("shrink");
      }
    }

Answer 1

您缺少右括号); 。 应该：

$(window).scroll(function() { 
   $("#service-nav").removeClass("shrink");
   var scroll = $(window).scrollTop();
   if (scroll <= 75) {
      $("#service-nav").addClass("shrink");
   }
});

Answer 2

尝试这个

$(window).scroll(function () {
    var a = $('#service-nav');
    var p = a.offset().top;
    var q = $(window).scrollTop();
    var r = $('#service-nav').parent().offset().top;
    if (p - q < 75) {
        a.addClass("shrink");
    } else {
        if (p - r < 75) {
            a.removeClass("shrink");
        }
    }
});