Javascript navigation effects

Question

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 >= 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 >= 200) {
        $('div.header').is('[style]')) { $('div.header').css('position','fixed');
    };
};

Full Code Example:

//scroll listener
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos >= 200) {
        if(!$('div.header').is('[style]')) { $('div.header').css('position','fixed'); };
        if(!$('div.nav').is('[style]')) { $('div.nav').css('padding','0'); };
        $('div.nav > ul > li, div.nav > ul > ul > 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 >= 200) {
        $('div.header').css('position','fixed');
        $('div.nav').css('padding','0');
        $('div.nav > ul > li, div.nav > ul > ul > 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?

I'd recommend you edit the post to include your actual real code, while expressing your concerns about browser resource usage - you can even include your html, css and javascript in an on-site executable snippet; you'll get the best value out of Code Review that way, since reviewers are always free to address any & all aspects of your code. — Mathieu Guindon
– Mathieu Guindon, Commented Jan 11, 2016 at 3:03

Dmitry Volokh · Accepted Answer · 2016-01-12 17:22:06Z

1

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.

edited Jan 12, 2016 at 17:22

answered Jan 12, 2016 at 13:36

Dmitry Volokh

1115 bronze badges

Add a comment |

Stack Exchange Network

Javascript navigation effects

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Javascript navigation effects

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions