3

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');       
});
4

4 に答える 4

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.

   }
});
于 2012-05-20T16:45:50.107 に答える
0

ここに例があります：

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

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

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

これは、下にスクロールするとオブジェクトが表示され、上にスクロールすると消えるように作成されます。オフセットは、アニメーションの開始位置を決定するために使用されます。デフォルトのオフセットは 0% で、オブジェクトの最上部がブラウザの最上部に到達したときにアニメーションが開始されることを意味します

于 2014-03-27T22:00:21.617 に答える
0

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

if (direction === 'down') {
  // Your current code
}
else {
  // Code to select the previous section
}
于 2012-02-18T02:42:53.577 に答える