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

Question

我正在编码＆＃34;返回顶部＆＃34;按钮，只有当用户向下滚动我的网页时才可见，并在用户向上滚动时隐藏。

规则是这样的：

• 如果页面scrollTop是＆gt; 100px然后显示按钮
• 如果页面scrollTop是＆lt; = 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

之前我遇到过同样的问题，我的修复程序没有固定位置容器进入固定位置容器。这意味着固定元素单独工作，但不能嵌套。