1

応答性の高いスティッキー サイドバーを開始しました: http://codepen.io/cmegown/pen/fjqzH。スティッキー部分を下げて、元のビューポートの幅に応じて反応します。ただし、下にスクロールしてからビューポートのサイズを変更すると、サイドバーの幅が変わらないことがわかります。

変数を更新する必要があることはわかっていsidebarWidthますが、それを行う方法/場所は正確です。

どんな助けでも大歓迎です、ありがとう！

編集： これは他のプロジェクトの中で取り残されましたが、私はこれを終わらせるために戻ってきました. もう少し進めましたが、ユーザーがページを下にスクロールしてブラウザーを展開した (またはデバイスを回転させた) 場合に、サイドバーの幅を更新する方法をまだ理解できないようです。中断した JS パネルにコメント付きのコードがいくつかあります。

4

1 に答える 1

0

スクロール関数に幅の計算を入れるだけです。

$(function () {
  // cache selectors
  var wrapper = $('.wrapper');
  var sidebar = $('.sidebar');

  // get some maths

  var sidebarTop = sidebar.offset().top;
  var sidebarOffset = 25; // is .wrapper padding

  // sticky logic
  $(window).on('scroll', function () {
    var windowTop = $(window).scrollTop();
    var sidebarWidth = Math.round(wrapper.width() * 0.3); // is .sidebar width
    if (sidebarTop < (windowTop + sidebarOffset)) {
      sidebar.css({
        position: 'fixed',
        top: sidebarOffset,
        width: sidebarWidth
      })
    } else {
      sidebar.css({
        position: 'static',
        width: '30%' // original CSS value
      })
    }
  })
})

スクロールするたびに幅を計算する必要があるため、オーバーヘッドが少しあります。$(window).resize()別の方法は、ウィンドウのサイズを変更するときに幅を把握できるように、関数に入れることです。

于 2013-07-22T19:39:24.943 に答える