1

jQuery と CSS を使用してタイムライン インターフェイスを作成しています。スクロールには jScrollPane を使用しています。私は持っている

  • parentすべての div をラップし、jScrollPane が適用される div
  • headerdivは縦スクロール時は固定、横スクロール時はスクロールし、
  • leftpane水平スクロール中はdivを固定する必要がありますが、垂直スクロールするとスクロールします

サンプル画像

サンプル画像

JSFiddle リンク : http://jsfiddle.net/gACZ8/4/

何か案は？

4

2 に答える 2

2

jscrollpane イベントを使用できます。

デモ: http://jsfiddle.net/gACZ8/10/

$(document).ready(function() {
  $('#parent')
    .bind('jsp-scroll-y',
      function(event, scrollPositionY, isAtTop, isAtBottom) {
        $(".header").css("top", scrollPositionY);
      }
    )
    .bind('jsp-scroll-x',
      function(event, scrollPositionX, isAtLeft, isAtRight) {
        $(".lefter").css("left", scrollPositionX);
      }
    )
    .jScrollPane();
});

position:relativeまた、両方の div (他のブロックを移動せずに上/左に移動する) とz-indexヘッダー (オーバーフロー サイドバーにする) に追加する必要があります。

于 2013-01-16T00:18:13.380 に答える
1

http://jsfiddle.net/gACZ8/11/

.jspPanediv jsScroll が作成するスクロール位置を確認し、div の位置をオフセットする必要が あります。

$(document).ready(function() {
  $('#parent').jScrollPane();
  $('#parent').on('scroll', function(){
    var jspPane=$(this).find('.jspPane');
    $('.lefter').css('left', 0-parseFloat(jspPane.css('left')));
    $('.header').css('top', 0-parseFloat(jspPane.css('top')));
  });
});

NB ヘッダーと leftcol は絶対に配置する必要があります。そうしないと、ページのコンテンツが一緒にプッシュされます。つまり、ページにはこれらの div を避けるマージンが必要であり、z-index に注意する必要があります。

編集

または、jscrollpane イベントを使用します (他の回答を参照)。私は以前にjscrollpaneを使用したことがありません!

于 2013-01-16T00:20:20.473 に答える