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

跳跃是因为top: 10px;在你的 CSS 中产生的：所有位置都是正确的，但是当应用类时，额外的 10 个像素不知从何而来。所以你在这里有两个选择：

1

top: 10px;从定义中删除.HighIndex（我猜，你不会想要的）

2

在你的 javascript 中反映那些 10px。这可能看起来像这样：

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 回答
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 回答