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

Question

我遵循本教程构建一个自定义粘性导航菜单与滚动。

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

我正在使用以下jQuery插件：

• 航路点：http://imakewebthings.com/jquery-waypoints/
• scrollTo：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 }
      }
    );

  }); 
});

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

• 路标-粘性标题导航。链接在向下滚动时突出显示，而不是向上滚动。
• jquery路标导航
• 通过点击滚动起来的jQuery路径点粘性导航是1 1px关闭。

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

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

Answer 1

把头撞到墙上后，我终于把我的密码修好了。这是非常简单的解决办法。

我只需从处理程序中删除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 }
      }
    );

  }); 
});

Answer 2

尝试这段代码

• 工作JsFiddle演示

`

$('.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 }

      }
    );

  }); 
});

`

演示JsFiddle在这里