Adding a css-class to a div when scrolling down

Question

I would like to add a css-class (.shrink) to a menu-bar (#secondary-menu) in a Bootstrap 3 website with LESS, when the menu reaches a top-margin position of 75px while scrolling down. The menu-bar stays fixed at 75px using sticky.js. However, I would like to change it's appearance with the shrink-class.

Unfortunately, I don't get my jQuery code working in the current form. The shrink-class is constantly applied. On its own, the CSS-classes work.

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 -->

LESS:

#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

You are missing closing bracket );. Should be:

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

Answer 2

Try this

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