我是 jQuery 和 JS 的新手，所以请善待:)
我的页面顶部有一个粘性导航栏，它链接到下面的各个内容部分（页面位置）。我想要达到的效果是让相关部分在用户开始阅读时自动突出显示（即使他们手动滚动到它而不是单击链接）。
这是我正在谈论的一个示例（*注意导航栏，当您滚动与之关联的页面时，div 是如何变化的）： http: //www.domo.com/。
我现在正在使用 jQuery 粘性插件来让菜单保持在顶部，但不知道如何进行悬停。
问问题
1427 次
2 回答
0
基本上问题分为两部分：
1. 我的每个部分在页面上的什么位置？
为了突出显示每个部分的导航元素，您首先需要知道每个部分的位置。
我建议使用一个类.section来定义你的部分和一个name属性来确定哪个是哪个，所以你的标记看起来像这样：
<html>
<head>...etc.</head>
<body>
<ul>
<li class="nav" id="nav_one">1</li>
<li class="nav" id="nav_two">2</li>
</ul>
<div class="section" name="one"> Section one</div>
<div class="section" name="two"> Section two</div>
</body>
</html>
JavaScript 查找每个部分的位置：
//define a sections object
var sections = {}
//find all sections on the page, then for each:
$('.section').each(function(){
//add a property to the object with a key corresponding to the name
//and a value corresponding to the offset from the top of the page.
sections[$(this).attr('name')] = $(this).offset().top;
});
2. 用户在页面的哪个位置？
谜题的第二部分是找出哪些部分在视图中。这会随着用户滚动而改变，因此如您所料，您需要使用 jQuery 的scroll()事件处理程序：
//the function passed as an argument will be called every time the user scrolls.
$(document).scroll(function(){
//get the new position
var newPos = $(this).scrollTop();
//configurable variable to decide how close a new section needs to be to the
//top of the page before it's considered the active one.
var OFFSET = 100;
//look at all the sections you have, and work out which one should be
//considered active.
for(name in sections){
if(sections[name] > newPos && sections[name] < newPos + OFFSET){
//the section with name = name is within OFFSET of the top
//remove "active" styling from the previously active nav elements
$('.nav').removeClass('active');
//make the nav element with an id of nav_sectionname active.
$('#nav_' + name).addClass('active');
}
}
});
于 2013-10-22T11:13:19.030 回答
0
使用jQuery Waypoints的好教程。
于 2013-10-22T11:14:47.390 回答