Fixing navbar when scrolling beyond a certain number of pixels I have written a jquery code, which fixes a navbar header on top of page when a user scrolls down to a certain pixels. But I am not sure whether is this the correct way to do this.

Because this is going to be a majorly used function by all users, it would be better if I can improve it in terms of optimizations and speed.

What basically I am doing is removing few classes and adding few classes when that breakpoint reaches.

$(function () {
    $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();

        if(scroll &gt; 130){
            $('#catNavBar').removeClass("navbar-static-top");
            $('#catNavBar').addClass("navbar-fixed-top");
            $('.gbText').addClass('hidden');
            $('.small-logo').removeClass('hidden');
            $('#headerGbCont').css('width', '50px');
        } else{
            $('#catNavBar').addClass("navbar-static-top");
            $('#catNavBar').removeClass("navbar-fixed-top");
            $('.gbText').removeClass('hidden');
            $('.small-logo').addClass('hidden');
            $('#headerGbCont').css('width', '109px');
        }
    });
});


Can you suggest any improvements in this code? Or anything that I am doing wrong that should be avoided?
Cache your jQuery objects as @Abbas mentioned. Also, you could use toggleClass with a state switch:

var $catNavBar = $('#catNavBar'),
    $headerGbCont = $('#headerGbCont'),
    followScroll = $(window).scrollTop() &gt; 130;

$catNavBar.toggleClass('navbar-static-top', !followScroll);
$catNavBar.toggleClass('navbar-fixed-top', followScroll);
// etc..
$headerGbCont.width(followScroll ? 50 : 109);


Regarding magic numbers like 130, I would suggest that you calculate distances between elements and define rules based on the result rather than approximating when you should switch classes.