CODEWITHSUNDEEP
javascriptscroll
npage
npage

Reputation: 1288

Stop lag on calling scroll function with webkit filter javascript

I have this function being called everytime the page is scrolled by a user:

window.onscroll=function(){
   document.getElementById("navBlurContent").style.top=-window.pageYOffset+125+"px";
}

However, this causes lots of lag to the browser. I have noticed some answers with jQuery that calls a delay to when the function is called. But, I want to use strictly javascript. I was wondering how this could this be done.

I have now realized that the majority of the lag is being caused by a -webkit-filter I have on the element. But I am not sure how to stop it.

Thanks

Upvotes: 0

Views: 306

Answers (1)

Naftali
Naftali

Reputation: 146310

Try not to do a DOM select on every scroll.

Cache it:

var blur_content = document.getElementById("navBlurContent");
window.onscroll=function(){
   blur_content.style.top=-window.pageYOffset+125+"px";
};

Upvotes: 2

Related Questions