判读滚动某个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>
效果图：
