Javascript navigation effects I am attempting to build my own website, based off Google's Material Design principles, to better my design/UX skills.

I am currently working on effects for my navigation, I wondered what would be best to lower browser resource usage when viewing my web page.


  Quick Example:
  When scrolling, without wrapping certain property changes within an if, does the browser (jQuery) attempt to make the property changes although they have already been made?


var scrollPos = $(window).scrollTop();
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos &gt;= 200) {
        if(!$('div.header').is('[style]')) { $('div.header').css('position','fixed'); };
    };
};


compared to...

var scrollPos = $(window).scrollTop();
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos &gt;= 200) {
        $('div.header').is('[style]')) { $('div.header').css('position','fixed');
    };
};


Full Code Example:

//scroll listener
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos &gt;= 200) {
        if(!$('div.header').is('[style]')) { $('div.header').css('position','fixed'); };
        if(!$('div.nav').is('[style]')) { $('div.nav').css('padding','0'); };
        $('div.nav &gt; ul &gt; li, div.nav &gt; ul &gt; ul &gt; li')
            .not('.faded')
            .css('display','none')
            .fadeIn(250)
            .addClass('faded')
            .css('display','inline-block');
        if(!$('div.header div.title').is('[style]')) {
            $('div.header div.title')
                .css('display','none')
                .children('h1')
                .css('display','none');
        }
    } else {
        if($('div.header').is('[style]')) { $('div.header').removeAttr('style'); };
        if($('div.header div.title').is('[style]')) { $('div.header div.title').removeAttr('style'); };
        if($('div.nav').is('[style]')) { $('div.nav').removeAttr('style'); };
        if($('div.nav li').hasCLass('faded')) { $('div.nav li').removeClass('faded'); };
        if($('div.nav li.nav-title').is('[style]')) {
            $('div.nav li.nav-title').fadeOut(250, function() {
                $('div.header div.title h1').fadeIn(250);
            });
        };
    };
});


compared to...

//scroll listener
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos &gt;= 200) {
        $('div.header').css('position','fixed');
        $('div.nav').css('padding','0');
        $('div.nav &gt; ul &gt; li, div.nav &gt; ul &gt; ul &gt; li')
            .not('.faded')
            .css('display','none')
            .fadeIn(250)
            .addClass('faded')
            .css('display','inline-block');
        $('div.header div.title')
            .css('display','none')
            .children('h1')
            .css('display','none');
    } else {
        $('div.header').css('position','static');
        $('div.header div.title').css('display','block');
        $('div.nav').removeAttr('style');
        $('div.nav li').removeClass('faded');
        $('div.nav li.nav-title').fadeOut(250, function() {
            $('div.header div.title h1').fadeIn(250);
        });
    };
});


Does either one make a difference in browser resource usage? Or is one incorrect?
First of all, having scroll handlers is not the best idea. Usually it kills performance.
If you have no choise - use debounce-like function within - in 99% you do not need explict calls on every move.
Don't use $('smth') within your handler. Save them to variables somewhere before. Do not look for them in your DOM tree on every scroll event.