hw-parallax icon indicating copy to clipboard operation
hw-parallax copied to clipboard

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

Open Quirksmode opened this issue 10 years ago • 1 comments

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/

Quirksmode avatar Apr 07 '14 11:04 Quirksmode

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.

ziad-saab avatar Aug 14 '14 10:08 ziad-saab