CODEWITHSUNDEEP
jqueryperformance
Mythical Fish
Mythical Fish

Reputation: 293

Is it possible to increase the speed of the .css method on the .scroll event?

This is my code:

$( window ).scroll( function () {
    scrollBG( '#about' );
}

function scrollBG( e ) {
  bg_position = $( document ).scrollTop() / 2;
  $( e ).css( 'background-position-y', bg_position );
}

What it does is scroll the background of an element as the user scrolls. This works fine, the only issue is when using the mousewheel to scroll, the css take a few milliseconds to catch up (since the mousewheel will move like 100px at a time).

Is there way to make the css change happen instantaneously? Perhaps native JavaScript is faster?

I've noticed this plugin does not have the issue I'm facing, but I don't want to use it as it seems overkill for my needs: http://johnpolacek.github.io/superscrollorama/

Upvotes: 0

Views: 70

Answers (2)

LorDex
LorDex

Reputation: 2636

Actually no, scroll event is being fired only limited times per second. First of all - try setting background-attachment to fixed. Second - it's better to use requestAnimationFrame whenever possible, rather than jQuery $(window).scroll method.

Upvotes: 1

rusmus
rusmus

Reputation: 1665

A couple of thoughts:

  • Do you have other css rules on the element to maintain? If not setting the style property directly might be faster.

  • As suggested by Kevin B in the comments, you could delay the actual shifting of the background, and possibly animate the shift in position to make the move less jarring.

Upvotes: 0

Related Questions