jquery 固定 div 向下滚动

发布于 2024-10-30 20:12:46 字数 1007 浏览 4 评论 0原文

我有一个画廊导航栏，当页面向下滚动太多时，我希望将其固定在顶部。我的脚本似乎工作正常，但应用该类时会出现“跳跃”（相对于固定位置之间的转换）。

链接（根据您的分辨率，您可能需要最小化页面才能看到效果）。

代码：

<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');
        }
      });
    }

原文

I have a gallery navigation bar which I would like to be fixed to the top when the page scrolls down too far. The script I have seems to work fine but there is a "jump" when the class is applied (transitioning between relative to fixed position).

Link (depending on your resolution, you may need to minimize the page to see the effect).

Code:

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

Script:

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');
        }
      });
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

平生欢 2024-11-06 20:12:46

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

1

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

2

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

if (y >= top - 10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
} else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
}

the jump accures because of top: 10px; in your CSS: all positionas are correct, but 10 additional pixels come from nowhere when class is applied. So you have two options here:

1

Remove top: 10px; from .HighIndex definition (which, I guess, you would not want)

2

Reflect those 10px in your javascript. This could look like this:

if (y >= top - 10) {
      // if so, ad the fixed class
      $('#navContainer').addClass('HighIndex');
} else {
      // otherwise remove it
      $('#navContainer').removeClass('HighIndex');
}

回复收藏 0 原文

睫毛溺水了 2024-11-06 20:12:46

我创建了一个空的 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');
    }
  });
}

i created an empty DIV that expands ti fill the space, when the nav is raised up. here is the code:

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');
    }
  });
}

回复收藏 0 原文

~没有更多了~