jquery waypoints hilighting navigation
我正在学习使用jQuery waypoints创建一个带有粘性标题的单页网站的教程。
http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/
一切正常，直到我对我的HTML结构做了一些改动。
我将导航放在我的“约”部分下面，该部分附在航点上。 在我的导航下，还有另一个没有附加到航点的部分，因为它的内容仍属于我的“约”部分。
然后是另外两个连接到航路点的部分。
我的粘性function和我的滚动function工作正常，但突出显示关于部分的问题，因为我将导航放在id="about"的部分下
我这里有一个jsFiddle： http ： //jsfiddle.net/8GENv/
我很确定问题出现在以下代码中：
var sections = $(".waypointsec"); var navigation_links = $(".navigation .innernav ul li a"); sections.waypoint({ handler: function(event, direction) { var active_section; active_section = $(this); if (direction === "up") active_section = active_section.prev(); var active_link = $('.navigation .innernav ul li a[href="#' + active_section.attr("id") + '"]'); navigation_links.removeClass("selected"); active_link.addClass("selected"); }, offset: '60%' })
我发现，对于粘性导航而言，路点可能会变得“笨拙”，并且所选状态总是会被取消，特别是在所有不同的屏幕尺寸选项周围。
这个插件更好，更容易使用，并且有很好的文档记录。 它是用简单的旧JavaScript编写的，你可以用css做一些非常酷的东西！
https://github.com/Prinzhorn/skrollr
一个例子可能是这样的