Div content Page titles in Veritcal Scroll Site

Whats the easiest way to enable my page title to update per content div are开发者_如何学Goas it's on?

I have a vertical scrolling website and would like the page title to change when the user navs to each content area (The content areas are within div & article)

Essentially, I'm trying to keep 'Orginal Site Title | + Home/About etc'

I'm thinking it's something I'd have to call with php to remember a set title attribute per div link? Any suggestions on setting this up (If possible)

I think you should take a look at the Viewport plugin. This way you have 4 selectors you can use:

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")

Now you could do something like this:

//Get the id of element(div) that is currently in view
var inview = $('div:in-viewport:first').attr('id');

//Define titles
if (inview == 'home'){

var newtitle = 'Home'

} else if (inview == 'about') {

var newtitle = 'About us'

} 

//Lets rename the page title
document.title = 'Orginal Site Title |' + newtitle;

The above code should now always be called when you scroll ($(window).scroll(function () { ... });) to update page title according to the div that is currently in view.

This is just a generic example and it can be completely changed to your needs. I hope it helps in some way.

You might be able to do this by writing a plugin based on the scrollspy plugin that comes as part of twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#scrollspy

You could tweak it so rather than setting a class on the target it updates the title with whatever the content is in the current viewable panel