Question

I know that this plugin definitely works – http://www.appelsiini.net/projects/viewport, I’ve already used it successfully on my project in progress thanks to this jQuery for Designers tutorial – http://jqueryfordesigners.com/scroll-linked-navigation/

You can see my problem here: http://www.jaygeorge.co.uk/gwennan-sage

I’d like to have a trigger for when the Contact div is in view, but this code is not working:

$(window).scroll(function () {
  if ($("#contact-header:in-viewport")) {
     $('nav').css('background-color','red');
  }
});

I’ve also tried something that isn’t even on the page e.g.

It’s firing off all the time, as though the #contact-header div is always in focus.
However you’ll see this plugin successfully works on the navigation, with different highlights depending on which part of the page you’re on.

Is there something obvious I’m doing wrong?

I’ve even tried

$(window).scroll(function () {
    if ($("h6:in-viewport")) {
      $('nav').css('background-color','red');
    }
});

…this is still highlighting the nav red, even though there are no h6s on the page!

Thanks very much,

Jay

Answer 1

Just a guess, but you have a href of #content-header, so try:

$(window).scroll(function () {
if ($("div#contact-header:in-viewport")) {
 $('nav').css('background-color','red');
}
});

OK, fail there. Try:

$(window).scroll(function () {
$("div#contact-header:in-viewport").each(function() {
 $('nav').css('background-color','red');
});
});