I am attempting to dynamically change a CSS style depending on the viewer's position on the page. Despite researching numerous similar threads online, I have not been able to get this code to work as intended. Any assistance would be greatly appreciated. Thank you.
The script I was editing can be found here: http://jsfiddle.net/BKnzr/151/
Here is my testing page (which is not functioning properly):
Below is the jQuery code that I am trying to implement:
// cache the elements
var $container = $('#container');
var $nav = $('#a.nav');
var $home = $('#home');
var $about = $('#about');
var $work = $('#work');
var $contact = $('#contact');
// get the view area of #container
var top=$(window).scrollTop();
var bottom = top + $container.height();
// execute code when #container is scrolled
$container.scroll(function() {
if ($home.offset().top < bottom) {
$nav.css({"color":"green","font-size":"20px"});
} else if ($about.offset().top < bottom) {
$nav.css({"color":"green","font-size":"20px"});
} else if ($work.offset().top < bottom) {
$nav.css({"color":"green","font-size":"20px"});
} else {
$nav.css({"color":"green","font-size":"20px"});
}
});