CODEWITHSUNDEEP
jqueryhtmlcss
SxChoc
SxChoc

Reputation: 619

Making elements appear/disappear when a page is scrolled

I'm trying to create a single scrolling page with a fixed element on it that is 'always' visible when a user scrolls down a page. For instance an image of a car with a background of a road. So as the user scrolls down the page it looks like the car is travelling down the road. Although the car appears on top of the road it must appear under certain elements (a bridge) for example and when it goes under one of these the image of the car needs to change.

I've knocked something up (which is seriously rubbish) to try to explain what I'm trying to do to a friend and it can be viewed at http://www.badappledesign.co.uk/academyhunter/ but the site that I'm trying to replicate is www.dangersoffracking.com.

I'm using the waypoints jQuery plugin to change the image of the car. This is seriously clunky and needs loads of work and doesn't work at all on an iPad, leading me to believe that I can't be going about this the right way.

But I wonder if some kind soul could point me in the right direction as to acheive what I'm aiming for.

Upvotes: 0

Views: 419

Answers (1)

Mark
Mark

Reputation: 6865

A lot of mobile browsers and IPad deliberately do not support position:fixed; on the grounds that fixed elements could get in the way on a small screen.

Upvotes: 2

Related Questions