Question

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

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

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

如果无论窗口大小与顶部相距一定距离，如何将导航固定到位？

由于

Answer 1

您可以使用element.getBoundingClientRect（）获取元素的位置，这样您就可以添加＆＃39; hfixed＆＃39; class返回顶部值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");  
    }
});

修改

为calc增加了50px的额外余量，因为顶栏。

编辑2：

更改了示例，现在它基于this

编辑3：

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

修复滚动，但屏幕尺寸不同，没有设置像素距离

1 个答案: