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

    效果图:

  • 相关阅读:
    javascript的函数调用什么时候加括号、什么时候不加括号
    妙味——JS学前预热03
    妙味——JS学前预热02
    妙味——JS学前预热01
    springbootday06 mysql
    springboot04 Ajax json Jquery
    springboot02 Thymeleaf
    springbootDay03 cookie和session 购物车技术
    Linux 基本命令
    NodeJs06 高并发
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8695391.html
Copyright © 2011-2022 走看看