判读滚动某个div显示底部按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>判断滚动到某个div显示底部按钮</title>
<style>
*{margin:0;padding:0}
body{ max-width: 640px; margin:0 auto; }
.box,.box2{ width: 100%; height: 1500px;}
.box3{ height: 350px; background:#ddd; }
.box{ background-color:#DB2350 }
.box2{ background-color:#5CA26C}
.btn{ position: fixed; bottom:0; left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%); width: 200px; height: 70px; border-radius: 5px; line-height: 70px; text-align: center; color: #fff; font-size: 16px; display: none; background-color: red; font-size: 25px; }
</style>
</head>
<body>
<div class="box" ></div>
<div class="box3" id="box">滚到到这个div,显示底部按钮</div>
<div class="box2"></div>
<div id="btn" class="btn">点击按钮</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 监听滚动事件
$(window).scroll(function(){
// 获得div的高度
var h = $("#box").offset().top;
var wt = $(this).scrollTop();
wt>h?$("#btn").show():$("#btn").hide()
//这个判断两种写法
// if($(this).scrollTop()>h){
// // 滚动到指定位置
// $("#btn").show();
// } else {
// $("#btn").hide();
// }
}); })
</script>
</body>
</html>
效果图: