1

ページが下にスクロールしすぎたときに上部に固定したいギャラリー ナビゲーション バーがあります。私が持っているスクリプトは正常に動作しているようですが、クラスが適用されると「ジャンプ」があります(固定位置に対する相対的な移行)。

リンク(解像度によっては、効果を確認するためにページを最小化する必要がある場合があります)。

コード:

<style>  
.HighIndex {z-index: 40; position: fixed; top: 10px;}
</style>

スクリプト:

var msie6 = $.browser == 'msie' && $.browser.version < 7;

    if (!msie6) {
      var top = $('#navContainer').offset().top - parseFloat($('#navContainer').css('margin-top').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, ad the fixed class
          $('#navContainer').addClass('HighIndex');
        } else {
          // otherwise remove it
          $('#navContainer').removeClass('HighIndex');
        }
      });
    }
4

2 に答える 2

0

ナビゲーションを上げたときにスペースを埋める空のDIVを作成しました。コードは次のとおりです。

if (!msie6) {
  var top = $('#navContainer').offset().top - parseFloat($('#navContainer').css('margin-top').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-10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
      $('#navContainerSpacer').css('height','138px');
    } else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
      $('#navContainerSpacer').css('height','0');
    }
  });
}
于 2011-04-04T09:56:27.867 に答える
0

あなたのCSSのためにジャンプが発生top: 10px;します：すべての位置は正しいですが、クラスが適用されると10個の追加ピクセルがどこからともなく来ます。したがって、ここには 2 つのオプションがあります。

1

top: 10px;定義から削除し.HighIndexます（これは望ましくないでしょう）

2

これらの 10px を JavaScript に反映します。これは次のようになります。

if (y >= top - 10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
} else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
}
于 2011-04-04T09:22:56.370 に答える