使用 jquery 航点向上滚动答案

【问题标题】：scrolling up with jquery waypoints使用 jquery 航点向上滚动
【发布时间】：2014-05-08 16:08:17
【问题描述】：

我正在为一个单页滚动站点使用 jquery waypoints 插件。有一个固定的顶部菜单。

<ul id="main_nav">
  <li><a href="#home">home</a></li>
  <li><a href="#about">about</a></li>
  <li><a href="#contact">contact</a></li>
</ul>

内容div是这样的：

<div id="content">
  <div id="home" class="page_content">Content here</div>
  <div id="about" class="page_content">Content here</div>
  <div id="contact" class="page_content">Content here</div>
</div>

我的滚动工作正常。但问题是航点。如果我单击一个链接，则会选择菜单（添加一个类 - 当前）。我正在使用航点来做同样的事情来滚动页面。向下滚动时，它工作正常。但不能完美地向上滚动。它需要再移一些顶部。然后它工作。如果我使用偏移量 -1%，那么它适用于向上滚动。但是向下滚动存在问题。这是我的js代码：

// CODE FOR SCROLLING
$('ul#main_nav a').bind('click',function(event){
    $('ul#main_nav a').removeClass("current");
    $(this).addClass("current");
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo');
    event.preventDefault();
});

// CODE FOR WAYPOINT
$('.page_content').waypoint({offset: '0%'});
$('.page_content').bind('waypoint.reached', function(event, direction) {
   var wayID = $(this).attr('id');
   $('.current').removeClass('current');
   $('#main_nav a[href=#'+wayID+']').addClass('current');       
});

【问题讨论】：

标签： jquery jquery-waypoints

【解决方案1】：

查看偏移选项

someElements.waypoint(function(event, direction) {
   if (direction === 'down') {
      // do this on the way down
   }
   else {
      // do this on the way back up through the waypoint
   offset: '50%'  // trigger at middle of page.

   }
});

【讨论】：

@francoboy7 - 航点回调只支持一个参数（方向）。您应该删除事件。

【解决方案2】：

我遇到了和你一样的问题。我通过调用航点两次来解决它。

$(".page_content").waypoint(function(direction){ // no offset on the way down
   if(direction == 'down') {
       // do this on the way down
   }
}).waypoint(function(direction){ // has offset on the way up
   if(direction == 'up') {
       // do this on the way up
   }
}, {offset: -1});

我知道这不是一个好的答案。但它对我有用。

【讨论】：

【解决方案3】：

答案已经在您的代码中了。函数回调中的direction 变量被传递一个字符串'up' 或'down'。你有向下方向的代码，但你也应该为向上方向做一些事情。

if (direction === 'down') {
  // Your current code
}
else {
  // Code to select the previous section
}

【讨论】：

它适用于向上滚动；但不准确。当它到达该点时，它不会触发，直到我将它移到顶部。我应该在向下方向使用什么？
offset 属性

【解决方案4】：

这是一个例子：

$('.page_content').waypoint(  
    function(direction) {

        if (direction ==='down') {
            $(this).fadeTo(1000, 1);
        }
        else {
                $(this).fadeTo(1000, 0);        
        }

    }, { offset: '50%' });

这样做是为了使对象在向下滚动时可见并在向上滚动时消失偏移量用于确定动画从哪里开始。默认偏移量为 0%，这意味着动画在对象的最顶部碰到浏览器顶部时开始

【讨论】：