search

ziad-saab / hw-parallax

Hardware-accelerated parallax scrolling plugin for jQuery
MIT License
39 stars 13 forks source link

Using this plugin when the images are contained within a 100% high scrollable div instead of body #2

Open Quirksmode opened 10 years ago

Quirksmode commented 10 years ago

Hi,

firstly just wanted to say thanks for this great plugin, it was exactly what I was looking for. I do however need help getting it to work correctly when the images are placed within a div which has it's height set to 100% and overflow auto attached. The reason for this is to get 100% height divs which work cross browser.

The problem happens because the scroll events on the plugin no longer correlate to the body, I managed to tweak it slightly and get it to work, but there are still slight issues (e.g. resizing the window when it's half way through a parallax scroll, and slight grey flicker along the bottom of the parallaxing image in firefox, I am sure these are related)

Ideally what I want is for the parallax images to load within the body tag to keep them on that layer, but for the scrolling of the div to still control them. The div is positioned to the top of the window just like the body would so there is not need to recalculate anything.

I have created a fiddle which shows how far I got:

http://jsfiddle.net/y7e8E/83/

ziad-saab commented 10 years ago

Hi @Quirksmode,

Usually when I need 100% height divs, I do it by setting html and body to height: 100%. This has worked across browsers for me. Did you try this? Perhaps it could solve your issue without modifying the code.