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

最新推荐文章于 2019-10-26 10:48:25 发布

rudy24

最新推荐文章于 2019-10-26 10:48:25 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签：淘宝网导航

本文链接：https://blog.csdn.net/rudy24/article/details/52881902

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>

rudy24

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
仿淘宝右侧导航栏显示隐藏

<!DOCTYPE html><html><head> <title>scale</title> <style type="text/css"> body:after{ content: '.'; clear:both; visibility: hidden; }
复制链接

扫一扫