1

ページをスクロールできるようにしたいのですが、特定のポイントに到達したときにdivを水平方向にスクロールしたいのですが、これを達成できないようです..ユーザーが2番目のセクションに到達したときに警告するjqueryがいくつかありましたが、動作させることができませんでした。現在、ブロックにアニメーションを付けているだけですが、まったく動作していません...助けていただけますか?

http://jsfiddle.net/AXsMR/

4

3 に答える 3

2

これはあなたが達成しようとしていることですか？

http://jsfiddle.net/Mu4ug/3/

ユーザーが 2 番目の div までスクロールすると、アニメーションが開始されます。

于 2012-07-23T10:17:14.730 に答える
1

まず、セクション タグは使用せず、DIVS を使用します。また、すべての「セクション」(div) を指定された幅のマスター div 内に配置します (垂直方向の積み重ねを防ぐため)。

次に、スクロール時に jQuery の offset().left メソッドを使用して、スクロールしたいセクションの位置を取得し (OR) 偶数スクロール用の定義済みの値を設定してから、animate 関数を呼び出します。

<div style='width: 4000px' id='masterDiv'>
      <div id='section1' class='innerDiv' style='width: 1000px'></div>
      <div id='section2' class='innerDiv' style='width: 1000px'></div>
      <div id='section3' class='innerDiv' style='width: 1000px'></div>
      <div id='section4' class='innerDiv' style='width: 1000px'></div>
</div>

ここでスクロールの方向を判断できます > jQuery スクロール イベントの方向を判断するにはどうすればよいですか? (下にスライドすると画面が右に移動し、上にスライドすると画面が左に移動します)

そして、このようなものを使用してください..

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#masterDiv").animate({ "left": "+=180px" }, 1000);
   } else {
      $("#masterDiv").animate({ "right": "+=180px" }, 1000);
   }
   lastScrollTop = st;
});

いくつかのテストが必要ですが、役立つはずです。

于 2012-07-23T10:13:24.823 に答える