如何让相对位置像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定位的后备选项，原因和你一样。