Repositioning DOM elements on jQuery.scroll () creates Choppy Scrolling

Question

I created a site that uses some jQuery parallax scrolling some time ago, and it was pretty smooth, but lately (updating browsers?) It has turned out to be volatile. I think this is due to the frequency of the jQuery scroll event firing. Here is a small sample version of what I'm trying to do ...

$(window).scroll(function() { offset = window.pageYOffset; $('#firstImg').css({ "top" : -750 + (offset/1.5) + "px" }); }); 

In principle, it will gradually vertically parallize the image when scrolling down. You can check the product here: http://www.davegamache.com/sandbox/best-of-2010/ . Campaign Monitor also repurposed my code for its hiring site ... check here: http://www.campaignmonitor.com/hiring/ .

I need to figure out how to prevent incredibly mutable scrolling. I even created setInterval and ran the re-positioning code manually (instead of using the .scroll () event) and couldn’t make it smooth (50 m / s was intermittent because it didn’t shoot enough, 10 m / s just caused a nervous cause why did this happen often?).

Let me know if anyone can help. Thank you very much!

Answer 1

I looked at your website and campaignmonitor.com website. Yours seemed to be working fine while the other was displaying the mutable scroll that you described.

Having examined the differences between your code, I noticed that Campaign Monitor uses precise pixels to define styles on its elements (for example, a histogram on a seven-year-old unit) instead of a position based on %%, such as yours (for example, a sketch element).

I tested the changes with firebug on several elements, and it seems to fix the situation.

Hope this helps.

Answer 2

A scroll event actually fires many times for each scroll action (in some browsers such as Firefox), so the best approach to handling scroll is the Wheel Event .

Note The wheel event is triggered only when the mouse wheel is used , the cursor keys and dragging the scroll bar do not trigger the event; however, the scroll event occurs when you drag the scroll bar using the cursor keys or the mouse wheel.

I recommend checking out this example: fooobar.com/questions/24939 / ... , which implements cross-browser processing for the scroll action.

This is a short fragment using the wheel (for modern browsers):

 $("html").on("wheel", function (e) { var deltaY = e.originalEvent.deltaY; var scrollTop = $(this).scrollTop(); if (deltaY > 0) { console.log("scroll down"); } else { console.log("scroll up"); } });