javascript - iOS 上的 Safari 在滚动停止后仅显示固定元素

Question

我正在编写一个“返回顶部”按钮，该按钮仅当用户向下滚动我的网页时才可见，并在用户向上滚动时隐藏。

规则是这样的:

• 如果页面scrollTop > 100px，则显示按钮
• 如果页面scrollTop <= 100px，则按钮隐藏

在 iOS9 (iPad mini) 上使用 Safari 运行该页面时，该按钮仅在滚动动画结束时显示，但当向上滚动达到滚动限制时它会立即隐藏。

您可以在此处查看我的做法示例: http://jsfiddle.net/jkwqq59a/

HTML:

<div class="container">
   <div class="box"></div>
</div>

CSS:

.container 
{
    position: relative;
    height: 3000px;
    background-color: blue;    
}
.box
{
    display: none;
    position: fixed;
    left: 50px;
    top: 50px;
    width: 50px;
    height: 50px;
    background-color: yellow;    
}

JS:

$(window).on('scroll', function()
{
     if ($(window).scrollTop() > 100 && !$('.box').is(':visible'))
         $('.box').show();
     else if ($(window).scrollTop() <= 100 && $('.box').is(':visible'))
         $('.box').hide();
});   

我的问题是:在 iPad 上，为什么按钮仅在向下滚动完成后才显示，而在向上滚动时立即隐藏？我怎样才能让它立即显示，就像我的 Mac 上的任何网络浏览器一样？

Answer 1

我之前遇到过同样的问题，我的解决方法是没有将固定位置容器放入固定位置容器中。这意味着固定元素单独可以正常工作，但不能嵌套。