jQuery 视口选择器插件失火

Question

我知道这个插件绝对有效 - http://www.appelsiini.net/projects/viewport ，由于这个 jQuery for Designers 教程 - http:// /jqueryfordesigners.com/scroll-linked-navigation/

您可以在这里看到我的问题：http ://www.jaygeorge.co.uk/gwennan-sage

我想在“联系人”div 处于视图中时触发，但此代码不起作用：

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

我也尝试过一些不可行的方法甚至不在页面上，例如

它一直在触发，就好像 #contact-header div 始终处于焦点一样。 但是，您会看到该插件在导航上成功运行，并根据您所在页面的哪个部分显示不同的突出显示。

有什么明显的我做错了吗？

我什至尝试过

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

......这仍然突出显示导航红色，即使页面上没有 h6！

非常感谢，

杰伊

Answer 1

只是猜测，但您有 #content-header 的 href，因此请尝试：

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

好吧，失败了。尝试：

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