jqueryウェイポイントでスクロールアップ

Question

1ページのスクロールサイトに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');  
}); 

Answer 1

答えはあなたのコードにすでに座っているのです。関数コールバック内の変数directionには、 'up'または 'down'のいずれかの文字列が渡されます。下方向のコードがありますが、上方向についても何かをする必要があります。

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

Answer 2

ここオフセットオプション

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. 

    } 
}); 

Answer 3

を見ての例です：

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

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

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

オブジェクトがダウンスクロールに見えるようになるとスクロールに アップ消えるように、これが行われますオフセットは、アニメーションの開始位置を決定するために使用されます。デフォルトのオフセットは0％です。これは、オブジェクトの最上部がブラウザの上部に当たったときにアニメーションが開始されることを意味します。

Answer 4

私はあなたと同じ問題がありました。私はウェイポイントを2度呼び出すことでそれを解決しました。

私はそれが良い答えではないことを知っています。しかし、それは私のために働く。