Is there a way to create a single scrolling page with a fixed element that remains visible as the user scrolls down? Imagine an image of a car on a road, where the car appears to be moving down the road as the user scrolls. The car should go under certain elements like bridges, and when it does, the car's image needs to change accordingly.
I've created a rough example to show my friend what I'm envisioning, which can be seen at . The website I'm trying to emulate is www.dangersoffracking.com.
Currently, I'm using the waypoints jQuery plugin to switch the car's image, but it feels clunky and doesn't work well on iPad devices. This makes me think that I might not be approaching this the right way.
If anyone could offer guidance on how to achieve what I have in mind, I would greatly appreciate it.