zoukankan      html  css  js  c++  java
  • 滚动距离顶部一定距离悬浮显示隐藏

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }
        
        .box1 {
             600px;
            height: 1800px;
            background-color: #ddd;
            margin: 0 auto;
        }
        
        .nav {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
             100%;
            height: 50px;
            line-height: 50px;
            background: #000;
            display: none;
            color: #fff; font-size: 24px; text-align: center;
        }
        
        .h250 {
            height: 250px;
            background: #D99797
        }
        </style>
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(window).scroll(function() {
            var scroHei = $(window).scrollTop();
            if (scroHei > 250) {
                $('.J_nav').fadeIn();
            } else {
                $('.J_nav').fadeOut();
            }
        });
        </script>
    </head>
    
    <body>
        <div class="box1">
            <div class="nav J_nav">悬浮显示</div>
            <div class="h250">高为250</div>
        </div>
    </body>
    
    </html>
    

      1.显示图:

    2.滚动之后显示:

  • 相关阅读:
    git
    Django RestFramework
    vuex以及axios
    npm 、webpack 、 vue-cli
    vue的生命周期
    vue-router
    vue框架 (小清单)
    nodejs review-01
    npm-bluebird使用
    js整理4
  • 原文地址:https://www.cnblogs.com/huanghuali/p/6656682.html
Copyright © 2011-2022 走看看