Question

我有一个<ul>导航，一旦我的可滚动div到达页面的特定部分，我想要突出显示。

让它工作的一个问题是我的导航是可排序的，所以零件经常可以更改，重新排序，甚至可以删除。

导航中的每个<li>都会连接到我的可滚动内容中的特定form，这会在导航更改时更改顺序或删除。

可滚动内容名为#reportContainer，通过javascript固定高度为浏览器页面的100％。

<ul id="reportNav">
  <li class="nav-active"><a id="section1" href="#">Section 1</a></li>
  <li><a id="section2" href="#">Section 2</a></li>
  <li><a id="section3" href="#">Section 3</a></li>
</ul>

<div id="reportContainer">
  <form action="#" id="section1">...</form>
  <form action="#" id="section2">...</form>
  <form action="#" id="section3">...</form>
</div>

我已经达到了这样的程度，我可以认识到div正在滚动，但当form得到div的顶部时，我无法弄清楚如何激活它。

我的基础是jsfiddle我找到的。如果有人能对此有所了解，我会非常感激。

var lastId, topMenu = $("#reportNav"), topMenuHeight = topMenu.outerHeight(),
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
  var item = $($(this).attr("href"));
  if (item.length) { return item; }
});


$("#reportContainer").scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;

// Get id of current scroll item
var cur = scrollItems.map(function(){
 if ($(this).offset().top < fromTop)
   return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";

if (lastId !== id) {
   lastId = id;
   // Set/remove active class
   menuItems
     .parent().removeClass("nav-active")
     .end().filter("[href=#"+id+"]").parent().addClass("nav-active");
}                   
});

div内容滚动时突出显示菜单

0 个答案: