如何解决元素在桌面上的滚动上正确显示,但在移动设备上不显示
我整理了一些代码,在用户一直滚动到页面底部后,在屏幕底部显示一个固定栏。现在这在桌面上运行良好,但在移动设备上它只是不显示。
知道为什么会这样以及我可以做些什么来解决这个问题吗?我已经清除了缓存和 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,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。
非常感谢任何和所有想法!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。