Question

我是jQuery和JS的新手，所以请善待：）

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

以下是我所谈论的一个示例（*注意导航栏滚动与其关联的页面时div如何更改）：http://www.domo.com/。

我现在正在使用jQuery sticky插件让菜单坚持到顶部，但无法弄清楚如何进行悬停。

Answer 1

基本上问题分为两部分：

<强> 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 example here

Answer 2

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

这里使用jQUery Waypoints的好教程。

粘性导航＆amp;悬停在div上

2 个答案: