Javascript 固定在滚动上，但屏幕大小不同，没有设置像素距离

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

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

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

无论窗口大小如何，当与顶部的距离设置为设定值时，如何使导航定位

---

谢谢

您可以使用element.getBoundingClientRect（）获取元素的位置，因此您可以在返回顶部值0后添加“hfixed”类：

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

编辑：

在计算中添加了一个额外的50px的边距，因为顶部的条

编辑2:

更改了示例，现在它基于

编辑3:

---

添加50px边距，因为新示例的顶部栏

您可以添加代码示例进行测试吗？一个正常工作的网页它所在的网页是obuhc.com它底部的白色条我想在顶部的黑暗导航下修复它我只是厌倦了这一点，但它使它在滚动时闪烁我希望它是平滑的。我发现了这一点，但不确定如何在我的网站上实现它。它现在正在工作，但当我向上滚动时，它会保持固定在顶部，而不会删除类。哦，那是因为getBoundingClientRect没有想到这一点，让我编辑它：）等等，有问题方法出错，转到obuhc.com，看看。它在大屏幕上从中间跳到顶部