修复滚动但屏幕尺寸变化时没有设置像素距离

Question

我有一个 div 的图像背景，其高度为 100%，因此它可以在任何设备上填满屏幕。然后在屏幕底部是一个导航栏。当页面滚动时，我希望导航栏固定在屏幕顶部，距离顶部一定距离。我试过使用这个 JavaScript:

$(window).scroll(function(){
  if ($(this).scrollTop() > 587) {
      $('.hnav').addClass('hfixed');
  } else {
      $('.hnav').removeClass('hfixed');
  }});

它在我的屏幕上工作正常，但在任何其他屏幕上却不行，因为导航会根据 window 大小改变与顶部的距离，因为图像的高度为 100%。

无论 window 大小如何，当它与顶部有一定距离时，如何让导航固定到位？？

谢谢

Answer 1

您可以使用 element.getBoundingClientRect() 获取元素的位置，因此您可以添加 'hfixed' class 一旦此 returns 的最高值为 0:

var nav = $('.hnav');
var pos = nav.position();                      
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos + 50 >= pos.top) {
        nav.addClass("hfixed");
    } else {
        nav.removeClass("hfixed");  
    }
});

编辑：

为计算添加了 50 像素的额外边距，因为顶部栏。

编辑 2：

更改了示例，现在基于this

编辑 3：

为新示例添加 50 像素的边距，因为顶栏

修复滚动但屏幕尺寸变化时没有设置像素距离

Fix on scroll but with varying screen size no set pixel distance

javascript

scroll

fixed