zoukankan      html  css  js  c++  java
  • 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>

    效果图:

  • 相关阅读:
    玩裸机s3c2440资料集合
    windows7与虚拟机fedora 9.0文件共享
    仪表运算放大器INA333
    sql语句中的 case.. when...then ...else 用法
    JS判断RadioButtonList是否有选中项
    SQL SERVER 2005 同步复制技术
    软件安全性标准
    div+css网页标准版式布局
    ComboBox和SelectedIndexChanged(转)
    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程
  • 原文地址:https://www.cnblogs.com/huanghuali/p/10303862.html
Copyright © 2011-2022 走看看