仿淘宝右侧导航栏显示隐藏

来源：互联网发布：python 时间戳微秒编辑：程序博客网时间：2024/04/29 15:23
<!DOCTYPE html><html><head>    <title>scale</title>    <style type="text/css">        div{            max-height:600px;            transition: all .4s linear 0s;            -webkit-transform: scale(.01,.01);            visibility: hidden;            z-index: 99;            position:fixed;            left:50%;            margin-left:500px;            bottom:60px;            width:150px;            height:250px;            border:1px solid #bd00ff;            background-color: #bd00ff;        }        .show_div{            visibility: visible;            -webkit-transform: scale(1,1);        }    </style></head><body>    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>    <div class="left_div"></div>    <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js'></script>    <script type="text/javascript">    $(function() {        var tTop = $(window).scrollTop();        var top_distant = $(".left_div").offset().top;        $(window).on('scroll',function() {        //滑动大于200px的情况下，展示出来            if ($(this).scrollTop() > 200) {                $(".left_div").addClass("show_div");            }else {                $(".left_div").removeClass("show_div");            }        });    });    </script>   </body></html>
0 0