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类并且方向向下时，Menu item 1类未正确应用于菜单链接。

例如：

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

加载网页时，.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 }
      }
    );

  }); 
});

{{1}}

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

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

编辑：以下是小提琴：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 }
      }
    );

  }); 
});

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

2 个答案: