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()>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()>293){             aa.addClass(navbar-fixed-top);           //bb.css('marginTop', aa.height());            }            else{                aa.removeClass(navbar-fixed-top);                //bb.css('marginTop', 0);            }        }     });  });
Add/Remove class on scroll depending on scroll length
javascript;jquery;css
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() > scrollTop);});There is no need of wrapping the code in $(document).ready() for binding events on window.Use ternary operatorUse toggleClass() with second parameter to add/remove class based on a condition.