horizontal scroll, detecting scroll position relative to anchors

Question

Ok, I\'m building a horizontal scroll website for a photographer. We have some really nice wireframes done and I\'m looking to create a neat effect where it highlights the

Answer 1

How about something like this: http://jsfiddle.net/coltrane/Mj6ce/

In that example, I've used jQuery -- just because it helps a lot with cross-browser compatibility -- but you could easily re-build it without jQuery if that's what you need.

The basic idea is this:

1. The scroller div provides the scrolling (via overflow-x: auto;), and it has a single immediate child div that holds all the other content items.
2. The jQuery function offset() is used to compare the left edge of the scroller to the left edge of the content div (using document coordinates). This tells us how much the scroller is scrolled.
3. We can then loop through all the items in order, and examine each item's position within the content div (using jQuery's position() function). Comparing an item's position to the current scroll value (from step 2) allows us to determine whether to highlight the item or not.
4. Finally, we use the scroll event, to trigger an update every time the scroll changes. Our update function simply applies steps 2 & 3 described above. I used jQuery's .scroll() function to bind the scroll event.