html元素在jQuery滚动到特定位置出现或隐藏
html元素在jQuery滚动到特定位置出现或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
*{margin:0; padding:0;}
body{ max-width: 640px; margin:0 auto; }
.box{ display: block; height: 50px; line-height: 50px;text-align: center; border:1px solid #ccc; border-radius: 20px; background-color: #ddd; margin-top: 30px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9 }
</style>
</head>
<body>
<div style="height:300px;background-color: #B15F5F"></div>
<div style="height:100px;background-color: #619A51" id="demo">当滚到到这个div,隐藏下面的按钮</div>
<div style="height:300px;background-color: #645FB1" ></div>
<div style="height:200px;background-color: #F18733"></div>
<a href="javascript:;" class="box" id="btn">按钮</a>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var demoHeight = $("#demo").offset().top;
window.onscroll=function(){
var this_scrollTop = $(this).scrollTop();
if(this_scrollTop>demoHeight ){
$("#btn").hide();
}else{
$("#btn").show();
}
};
});
</script>
</body>
</html>
文章由官网发布,如若转载,请注明出处:https://www.dpaoz.com/923
0 评论
1.3k
发表评论

热门文章
自媒体博客Spimes主题11w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
Spzac个人资讯下载类主题6.7w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
vCard主题个人简历主题6.5w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Splity博客双栏主题4.9w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
热评文章
自媒体博客Spimes主题337 评论
Splity博客双栏主题171 评论
Spzac个人资讯下载类主题82 评论
Spzhi知识付费社区主题34 评论
Splinx博客图片主题33 评论
vCard主题个人简历主题27 评论
Pure轻简主题23 评论
Spkan视频影视类模板21 评论
axiomxs
昨天 22:26
作者老大哥,求说说页面啊