Question

我整理了一些代码，在用户一直滚动到页面底部后，在屏幕底部显示一个固定栏。现在这在桌面上运行良好，但在移动设备上它只是不显示。

知道为什么会这样以及我可以做些什么来解决这个问题吗？我已经清除了缓存和 cookie，但似乎没有任何效果，到目前为止我尝试过的任何触摸屏设备上都没有显示该栏 ?

HTML：

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">
</script>
</head>
<body>

<h1>Hidden Box Demo (scroll down)</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div id="showdiv">
        <h3>I am a hidden box.</h3>
        </div>
</body>
</html>

CSS：

#showdiv { position: fixed; right: 0; bottom: 0; width: 100%; height: 60px; background: white;display:none;}
        h3{
            font-size: 20px;
            color:#00A5DB;
            text-align:center;
            
        
}

JS：

            $(document).ready(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
                $('#showdiv').animate({height: 'toggle'});
                }else{
                    $('#showdiv').fadeOut('slow');
                }
            });
        });

这是代码的 Fiddle。

非常感谢任何和所有想法！

元素在桌面上的滚动上正确显示，但在移动设备上不显示

0 个答案: