Add/Remove class on scroll depending on scroll length I am a jQuery beginner and would like some pointers on whether the following code could be made shorter, or there is a better way to get the same result.

jQuery(document).ready(function(){
     var aa=jQuery('#navigation-wrapper');
     var bb=jQuery('#top');
     jQuery(window).scroll(function(){

        if(jQuery("body").hasClass("home")){    
            if(jQuery(this).scrollTop()&gt;510){
                aa.addClass("navbar-fixed-top");
                //bb.css('marginTop', aa.height());
             }
            else{
                aa.removeClass("navbar-fixed-top");
                //bb.css('marginTop', 0);
            }
        }
        else {
           if(jQuery(this).scrollTop()&gt;293){
             aa.addClass("navbar-fixed-top");
           //bb.css('marginTop', aa.height());
            }
            else{
                aa.removeClass("navbar-fixed-top");
                //bb.css('marginTop', 0);
            }
        }
     });
  });
The code can made very short.

$(window).scroll(function () {
    var scrollTop = $(document.body).hasClass('home') ? 510 : 293;
    $('#navigation-wrapper').toggleClass('navbar-fixed-top', $(this).scrollTop() &gt; scrollTop);
});



There is no need of wrapping the code in $(document).ready() for binding events on window.
Use ternary operator
Use toggleClass() with second parameter to add/remove class based on a condition.