javascript - 如何让相对位置像 iPhone 上的固定位置一样工作？

Question

我有一个顶部导航栏，我使用 JavaScript 将其固定在顶部。

$(window).scroll(function() {
  $('#nav').css({top: $(window).scrollTop()});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">My nav</div>

我的 iPhone 遇到问题，因为当我向下滚动时，导航会消失，之后当我将手指从触摸屏上移开时，导航会再次出现。

我尝试使用 touchstart、touchmove 和 touchend 事件在导航的固定/相对位置之间触发，但仍然没有'工作正常。 (问题是，当我不用手指触摸屏幕时，导航应该是相对的)

在不使用 position:fixed 的情况下，是否有其他方法可以解决此问题？

Answer 1

当你滚动时，你的导航消失，因为在触摸设备上，它只在你放开滚动时计算scrollTop。同样使用 js 处理粘性导航。你试过吗

position :sticky;
top:0;

我用它作为 iPhone 上固定位置/js 定位的后备，和你的原因一样。