Header of the section you are currently reading;

[clokey2k]

I have been playing around with some jQuery* as part of a larger idea in my head.

I needed to display the text of a ‘h1’ element based on the location of the readers view-port.

I have a working example here: http://clokey2k.com/htmlplay/headertrack/

My question? is this the most efficient/robust way of achieving this goal? (View the source for the script)

I originally had the script collect the position of each ‘h1.title’ elements and compared them to the window position every time the window scrolled. I decided that this was too much for every ‘.scroll()’ call, and changed it to setting up an indexed array of position values, and looped through that instead.

I know that if anything changes on the page (AJAX loading of extra content, etc.) I will have to re-run the ‘createTitleArray()’. I figured doing that every now and then is better than repeating it on EVERY scroll event.

* IMO the jQuery overhead is minimal, and I’ll be using it for other scripts no-doubt!

My larger idea may be used to highlight a position in a menu whilst reading, although it is a definite start for me :-) .

[jamygolden]

I can’t think of a better way of doing it.

Note: It doesn’t work properly with the last h1.title.

[clokey2k]

Good shout on the last ‘h1.title’ – I will look into that…

Fixed it – the array didn’t have any further items to compare the last ‘h1.title’ to. Used the ‘html’ height as a last index.

[Author]

Posts