scroll event running slow - is there a lighter way?

Question

I have the following scroll event that on scroll measures where in the page the user is and updates the navigation styling according to which section they are in. The problem is the calculation i'm performing on scroll is quite chunky and it slows down the page a little bit when scrolling. Here is my code:

screenHeight = $(window).height();
screenHeightRatio = screenHeight*0.3;
//here I calculate screen height plus the ratio of the screen height I would like for the menu elements to change

aboutOffset = $(".aboutcontainer").offset().top - screenHeightRatio;
portfolioOffset = $(".portfoliocontainer").offset().top - screenHeightRatio;
musicOffset = $(".musiccontainer").offset().top - screenHeightRatio;
contactOffset = $(".contactcontainer").offset().top - screenHeightRatio;
// here I calculate the offset for each section in the screen



$(window).scroll(function(){
var amountScrolled = $(document).scrollTop();
//here I see how far down the page the person has scrolled

if($(".header-options").hasClass("portfolio-inner-active")) { 
return;
// here I cancel the scroll event if they are in a certain section

} else {

if(contactOffset <= amountScrolled) {
// each of the following if statements will calculate if the amount scrolled surpasses the various section offsets I defined outside of the scroll function

    $(".header-options li").removeClass("active");
    $(".contactbutton").addClass("active");
 history.pushState('page2', 'Title', '/contact');
    return;
    } else {
        if(musicOffset <= amountScrolled) {
        $(".header-options li").removeClass("active");
        $(".musicbutton").addClass("active");
    history.pushState('page2', 'Title', '/music');
        return;
        } else {
            if(portfolioOffset <= amountScrolled) {
            $(".header-options li").removeClass("active");
            $(".portfoliobutton").addClass("active");
 history.pushState('page2', 'Title', '/portfolio');
            return;
            } else {
                if(aboutOffset <= amountScrolled) {
                $(".header-options li").removeClass("active");
                $(".aboutbutton").addClass("active");
             history.pushState('page2', 'Title', '/about');
            }
        }
    }
}
}

});

Would love to know if there is a less cpu hungry way of doing this as I really want this effect on the site.

Cheers

http://ejohn.org/blog/learning-from-twitter/, https://css-tricks.com/debouncing-throttling-explained-examples/ — CBroe, Apr 11 '16 at 21:38

score 2 · Accepted Answer · answered Apr 11 '16 at 21:39

2

Use jQuery throttle / debounce by Ben Alman

$(window).scroll( $.throttle( 250, function(){...} ) );

http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js

answered Apr 11 '16 at 21:39

Ryan Dantzler

1,124
1
8
18

Excellent point, here is more info on that for anyone: https://css-tricks.com/debouncing-throttling-explained-examples/ – Kyle Hawk Apr 11 '16 at 21:42
Plugin worked a treat and performance much smoother now. Many thanks – red house 87 Apr 11 '16 at 21:54

score 1 · Answer 2 · edited May 23 '17 at 12:15

If you are looking to just delay the amount of calls, then this could work

var waitForFinalEvent = (function () {
      var timers = {};
      return function (callback, ms, uniqueId) {
        if (!uniqueId) {
          uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
          clearTimeout (timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
      };
    })();

This is some code that I found on here actually, forgive me I don't have the url to link back to the original source. This will delay the call X amount of seconds after the scroll. Meaning, instead of making fifty bigillion calls in that time frame, it'll make one, which could only help.

The way you call it is like this:

waitForFinalEvent(function() {

//stuff to do

}, 500, "randomString");

Hope this helps!! Adjust the 500 to the amount of time you want to delay.

ORIGINAL POST: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Seems logical, will give this a shot now and measure performance — red house 87, Apr 11 '16 at 21:39
I will keep searching for the original post, I'll update when I find it. I would hate to get credit for someone else's work. — Kyle Hawk, Apr 11 '16 at 21:40
Thanks for your efforts Kyle, in the end the plugin proposed by Ryan did the trick — red house 87, Apr 11 '16 at 21:54

scroll event running slow - is there a lighter way?

2 Answers2

Linked