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.veimoz.com/923
0 评论
2.6k
发表评论
热门文章
自媒体博客Spimes主题36w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题13w 阅读
一款个人简历主题，可以简单搭建一下，具体也比较简单....
Splity博客双栏主题12w 阅读
仿制主题，Typecho博客主题，昼夜双版设计，可....
Spzac个人资讯下载类主题11w 阅读
用于作品展示、资源下载，行业垂直性网站、个人博客，....
热评文章
自媒体博客Spimes主题418 评论
Splity博客双栏主题188 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
三栏清新博客S_blog主题30 评论
vCard主题个人简历主题29 评论
Pure轻简主题28 评论
最新评论
Z. 
11月29日
博主你好，Deng插件，这个点击不进去，提示这个（Warning: require_once(/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php): failed to open stream: No such file or directory in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26
Fatal error: require_once(): Failed opening required '/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php' (include_path='.:/www/server/php/72/lib/php') in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26）
点都德
3天前
：喷：：喜欢：：怒：：黑线：