jQuery置顶导航-蒲公英云

jQuery置顶导航

Html的代码

<body>
        <div class="logo_bar">顶部 logo</div>
        <div class="menu">置顶菜单</div>
        <div class="menu_pos"></div>
        <div class="down_con">
            <p style="color:red">英莱特网站主内容</p>
            <p>网站主内容</p>
            <p>网站主内容</p>
            <p>网站主内容</p>
            <p>网站主内容</p>
        </div>
        <a href="javascript:;" class="totop"></a>
    </body>

Css的代码

<style type="text/css">        
             body {
                margin: 0px;
            }
            .logo_bar {
                width: 960px;
                height: 200px;
                background: url(img/bg3.jpg) no-repeat center;
                background-size: 100%, 100%;
                margin: 0 auto;
            }
            .menu,
            .menu_pos {
                width: 960px;
                height: 50px;
                margin: 0 auto;
                background-color: gold;
                text-align: center;
                line-height: 50px;
            }
            .menu_pos {
                display: none;
            }
            .down_con {
                width: 960px;
                height: 1800px;
                margin: 0 auto;
            }
            .down_con p {
                margin-top: 100px;
                text-align: center;
            }
            .totop {
                width: 50px;
                height: 50px;
                background: url(img/top.jpg) center center no-repeat #000;
                background-size: 100%, 100%;
                border-radius: 50%;
                position: fixed;
                right: 50px;
                bottom: 50px;
                display: none;
            }
        </style>

jQuery的代码

<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $(window).scroll(function(){
                    var nowTop=$(document).scrollTop();
                    if(nowTop>200){
                        $('.menu').css({
                             position:'fixed',
                             left:'50%',
                             top:0,
                             marginLeft:-480
                        });
                        $('.menu_pos').show();
                    }
                    else{
                         $('.menu').css({
                         position:'static', 
                         marginLeft:'auto'
                         });
                         $('.menu_pos').hide();
                    }
                     if(nowTop>400){
                        $('.totop').fadeIn();
                         }
                        else{
                         $('.totop').fadeOut();
                     }
                })
                $('.totop').click(function(){
                    $('html,body').animate({'scrollTop':0});
                })
            })
        </script>