0

我是 jQuery 和 JS 的新手，所以请善待:)

我的页面顶部有一个粘性导航栏，它链接到下面的各个内容部分（页面位置）。我想要达到的效果是让相关部分在用户开始阅读时自动突出显示（即使他们手动滚动到它而不是单击链接）。

这是我正在谈论的一个示例（*注意导航栏，当您滚动与之关联的页面时，div 是如何变化的）： http: //www.domo.com/。

我现在正在使用 jQuery 粘性插件来让菜单保持在顶部，但不知道如何进行悬停。

4

2 回答 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'); 
    }
  }
});

Codepen 示例在这里

于 2013-10-22T11:13:19.030 回答
0

http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/

使用jQuery Waypoints的好教程。

于 2013-10-22T11:14:47.390 回答