手机网页div向下滑隐藏，向上滑显示

最新推荐文章于 2023-02-20 16:56:38 发布

他化天域外

最新推荐文章于 2023-02-20 16:56:38 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_35606790/article/details/90174236

jquery 专栏收录该内容

9 篇文章

订阅专栏

这篇博客分享了如何使用jQuery实现手机网页中div元素的滑动效果，当向下滚动时div隐藏，向上滚动时显示。关键在于调整div在不同高度的显示状态，并注意避免固定定位可能带来的问题。

直接贴代码，注意要设置好两个高度，控制好div在何高度显示，何处隐藏。原代码里的固定定位可能会产生影响，导致此方法不能使用。`

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>testmenu</title>
<style type="text/css">
*{margin:0;padding: 0}
body{height:3900px;}
 
.yapiskan{
height: 80px;
background-color:#e74c3c;
color:white;
font-size:24px;
width: 100%;
text-align:center;
transition:top .5s;
}
.yya{
position:fixed;
left:0;
top:0;
}
.gizle{top:-90px;}
.sabit{top:0;z-index:9999;}
.toper{height: 400px;width: 100%;background-color: #D0EAF1;}
</style>
</head>
<body>
<div class="toper">
<p>bulabulabulabulabula this is for myself</p>
</div>
<div class="yapiskan">hello this is a menu test</div>
</body>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var h1 = 400;
var h2 = 480;
var ss = $(document).scrollTop();
$(window).scroll(function(){
var s = $(document).scrollTop();

if(s< h1){
$('.yapiskan').removeClass('yya');
}if(s > h1){
$('.yapiskan').addClass('yya');
}if(s > h2){
$('.yapiskan').addClass('gizle');
if(s > ss){
$('.yapiskan').removeClass('sabit');
}else{
$('.yapiskan').addClass('sabit');
}
ss = s;
}


});

});
</script>
</html>