2

他の場所から割り当てた次のコードを介して下にスクロールすると、固定位置に切り替わるページはめ込みナビゲーションメニューがあります。

    $(document).ready(function () {
          var top = $('#toc2').offset().top - parseFloat($('#toc2').css('marginTop').replace(/auto/, 0));

$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();

// whether that's below the form
if (y >= top) {
  // if so, add the fixed class
  $('#toc2').addClass('fixed');

} 

else {
  // otherwise remove it
  $('#toc2').removeClass('fixed');
}
 });
});

CSSスタイル：

#toc2Wrapper { 
 left: 960px;
 position: absolute;
 width: 200px;
font-size:11px;

}

#toc2 {
 position: absolute;
 top: 0;
 background: #FFF;
 padding:3px;
 width: 200px;
 border: 1px solid #E0E0E0;
}

#toc2.fixed {
 position: fixed;
 top: 0;
 }

私の問題は、ページコンテンツの性質上、メニュー内で複数の項目を切り替えると、ページ内ナビゲーションが非常に大きくなる可能性があることです。これは、メニューの長さがウィンドウの下部を超えて到達し、固定位置スクリプトのために到達できなくなる可能性があることを意味します（他のセクションが再び折りたたまれていない限り）。

一度に1つのセクションのアコーディオンメニューに依存するのではなく、メニューを内部でスクロールさせたり、ウィンドウの下部が下部を超えた場合にウィンドウの上部から固定解除できるようにしたいです。窓。

Androidのウェブサイトには、私が達成しようとしていることの良い例があります。比較的短いウィンドウで[アプリコンポーネント]を展開すると、メニューのスクロールバーが表示されます。

https://developer.android.com/guide/components/index.html

このようなものを許可するように既存のスクリプトを変更するにはどうすればよいですか？

4

1 に答える 1

0

固定 div クラスを追加する前に、関数内でウィンドウの高さと #toc2 の高さを測定して比較できます。

$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();

  // get your window and toc heights
  var windowheight = $(this).height();
  var tocheight = $('#toc2').height();

  // compare heights
  if(windowheight > tocheight) {
    // only runs add/remove fixed if window height is greater than #toc2
    if (y >= top) {
      // if so, add the fixed class
      $('#toc2').addClass('fixed');
      } 
  else {
    // otherwise remove it
    $('#toc2').removeClass('fixed');
    }
   }
 });
于 2012-12-13T20:35:38.223 に答える