jquery判断滚动到某个div显示底部按钮

判读滚动某个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>

效果图:

原文地址:https://www.cnblogs.com/huanghuali/p/10303862.html