Question

我有不同的div和menuebar，它们是LI-elements中的constis。

<ul>
    <li><a href="#first" id="nav1" title="Next Section">FIRST</a></li>
    <li><a href="#second" id="nav2" title="Next Section">SECOND</a></li>
    <li><a href="#third" id="nav3" title="Next Section">THIRD</a></li>
    <li><a href="#fourth" id="nav4" title="Next Section">FOURTH</a></li>
</ul>

div的名称是#first to #fourth。

如果其中一个DIV（或更多）在视口中，我想更改链接到此DIV的li元素的底边框颜色。

例如：如果DIV #third在视口中，则第三个LI元素（＃nav3）应将其底边框更改为绿色。如果它离开视口，它应该再次变为白色。

只是DIV在视口中的时间。一旦离开视口，我想撤消颜色变化。

我尝试使用jQuery Viewport：http://www.appelsiini.net/projects/viewport

我的问题是我无法弄清楚如何使用这个选择器 - 我知道它是基本的东西，但我真的无法弄清楚。

$("#third:in-viewport").each(function() {
    $("#nav1, #nav2, #nav4").animate({ borderBottomColor: '#fff' },800);
    $("#nav3").animate({ borderBottomColor: 'green' },800);
});

如果有人可以帮助我，那会很棒。非常感谢！

Answer 1

我会在你的DIV中添加一个类，例如：

<div id="first" class="item"> // Your code <div>
<div id="second" class="item"> // Your code <div>
<div id="third" class="item"> // Your code <div>
<div id="fourth" class="item"> // Your code <div>

然后在jQuery中使用类似的东西来突出显示链接：

$(".item:in-viewport").each(function() {
     var item_id = $(this).attr("id");
     // In viewport
     $("a[href=#" + item_id +"]").animate({ borderBottomColor: 'green' },800);     
     // Not in viewport
     $("a").not("a[href=#" + item_id +"]").animate({ borderBottomColor: '#fff' },800);
});

如果在视口中;改变边框颜色

1 个答案: