垂直粘性导航菜单向下时选择了错误的链接

Question

我正在按照本教程构建一个带有滚动功能的自定义粘性导航菜单。

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

我正在使用以下 jQuery 插件：

• 航点：http://imakewebthings.com/jquery-waypoints/
• 滚动到：https://github.com/flesler/jquery.scrollTo

当点击链接时，滚动按预期工作；然而; .selected 类在单击且方向向下时未正确应用于菜单链接。

例如：

• 菜单项 1
• 菜单项 2
• 菜单项 3

当页面加载时，Menu item 1 用.selected 突出显示 类。

当我们点击Menu item 2 时，会发生滚动，但不会突出显示。

现在，如果我们点击 Menu item 3 会发生滚动并且突出显示 Menu item 2 而不是 Menu item 3

这是我正在使用的代码：

<nav class="section-navigation">
    <ul>
        <li><h5><a href="#item-1">item A</a></h5></li>
        <li><h5><a href="#item-2">item B</a></h5></li>
        <li><h5><a href="#item-3">item C</a></h5></li>        
        <li><h5><a href="#item-4">item D</a></h5></li>
    </ul>
</nav>

<div class="section-content" id="item-1">some content for this section</div>
<div class="section-content" id="item-2">some content for this section</div>
<div class="section-content" id="item-3">some content for this section</div>
<div class="section-content" id="item-4">some content for this section</div>

---

jQuery('.section-navigation').waypoint('sticky', {
  offset: 90 // Apply "stuck" when element 30px from top
});

jQuery(function() {
  var sections = jQuery('.section-content');
  var navigation_links = jQuery('nav a');

  sections.waypoint({
    handler: function(event, direction) {
      var active_section;
      active_section = jQuery(this);

      if (direction === "up") active_section = active_section.prev();

      var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');
      navigation_links.closest('li').removeClass("selected");
      active_link.closest('li').addClass("selected");

    },
    offset: '-20px'
  });

   jQuery('nav a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    jQuery.scrollTo(
      jQuery(this).attr("href"),
      {
        duration: 200,
        //offset: { 'left':0, 'top':-0.15*jQuery(window).height() }
        offset: { 'top':+0.15 }
      }
    );

  }); 
});

我发现了另外三个相关的问题，但没有一个给出解决我问题的答案：

• Waypoints - Sticky Header Navigation. Links Are Highlighted Upon Scrolling Down But Not Scrolling Up
• jquery waypoints hilighting navigation
• jQuery Waypoints sticky nav when scrolling up via a click is 1px off

请帮我解决这个问题。谢谢。

编辑：这是小提琴：http://jsfiddle.net/uteqm28v/2/

Answer 1

试试这个代码

• 工作JsFiddle Demo here

`

$('.section-navigation').waypoint('sticky', {
  offset: 30 // Apply "stuck" when element 30px from top
});
 var previousScroll = 0;
 var  drctn = '';
var linkClk = false;
(function () {    
    $(window).scroll(function () {
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           drctn='down';           
       }
       else {
          drctn='up';          
       }
       previousScroll = currentScroll;
    });
}());

jQuery(function() {
    var sections = jQuery('.section-content');
    var navigation_links = jQuery('nav a');

  sections.waypoint({
    handler: function(event, direction) {
      var active_section;
      active_section = jQuery(this);    
        if(linkClk){
            linkClk=false;
            if (drctn=='down'){            
               active_section = active_section.next();    
           }
           var  active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');


      navigation_links.closest('li').removeClass("selected");
      active_link.closest('li').addClass("selected");
        }
        else
            {
                if (direction === "up") active_section = active_section.prev();

      var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');
      navigation_links.closest('li').removeClass("selected");
      active_link.closest('li').addClass("selected");
            }



    },
    offset: '-20px'
  });

   jQuery('nav a[href^="#"]').on('click', function(event) {       
       linkClk = true;
    event.preventDefault();
       //jQuery('nav a').closest('li').removeClass("selected");
       //jQuery(this).closest('li').addClass("selected");
    jQuery.scrollTo(        
      jQuery(this).attr("href"),
      {
        duration: 200,
        //offset: { 'left':0, 'top':-0.15*jQuery(window).height() }
        offset: { 'top':+0.15 }

      }
    );

  }); 
});

`

Demo JsFiddle here

Answer 2

在把我的头撞到墙上之后，我终于修复了我的代码。这是非常简单的修复。

我只需要从处理程序中删除 event 并将 offset 设置为相同数量的像素（它们可以相反，一正一负）。

这是工作小提琴http://jsfiddle.net/uteqm28v/5/

还有代码：

$('.section-navigation').waypoint('sticky', {
  offset: 30 // Apply "stuck" when element 30px from top
});

jQuery(function() {
    var sections = jQuery('.section-content');
    var navigation_links = jQuery('nav a');

  sections.waypoint({
    handler: function(direction) {
      var active_section;
      active_section = jQuery(this);

      if (direction === "up") active_section = active_section.prev();
      var active_link = jQuery('nav a[href="#' + active_section.attr("id") + '"]');
      navigation_links.closest('li').removeClass("selected");
      active_link.closest('li').addClass("selected");

    },
    offset: '20px' //this can be negative
  });

   jQuery('nav a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    jQuery.scrollTo(
      jQuery(this).attr("href"),
      {
        duration: 200,
        //offset: { 'left':0, 'top':-0.15*jQuery(window).height() }
        offset: { 'top':20 }
      }
    );

  }); 
});