如何使用jquery制作置顶菜单-js教程-PHP中文网

如何使用jquery制作置顶菜单

零到壹度

发布： 2018-03-17 13:37:28

原创

1481人浏览过

这次给大家带来如何使用jquery制作置顶菜单的实战案例，下面是详细分析,一起来看一下吧。

jquery制作置顶菜单

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>06-置顶菜单</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function() {
                var nowTop = $(document).scrollTop();                if (nowTop>200) {                    // 注意是 “，” 
                    $('.menu').css({
                        position:'fixed',
                        top:0,                        // 定位 一半
                        left:'50%',
                        marginLeft:-480,
                    })

                    $('.menu_pos').show();
                }else{
                    $('.menu').css({                        // 对原来的样式进行覆盖
                        position:'static',
                        marginLeft:'auto',
                    })

                    $('.menu_pos').hide();
                }
            });
        })    </script>
    <style type="text/css">
        body{margin:0px;}
        .logo_bar{            width:960px;            height:200px;            background-color:#f0f0f0;            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(images/up.png) center center no-repeat #000;            border-radius:50%;            position:fixed;            right:50px;            bottom:50px;            display:none;        }
    </style></head><body>
    <p class="logo_bar">顶部logo</p>
    <p class="menu">置顶菜单</p>
    <p class="menu_pos"></p>
    <p class="down_con">
        <p style="color:red">网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
    </p>
    <a href="javascript:;" class="totop"></a></body></html>

登录后复制

jquery制作置顶菜单

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>06-置顶菜单</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function() {
                var nowTop = $(document).scrollTop();                if (nowTop>200) {                    // 注意是 “，” 
                    $('.menu').css({
                        position:'fixed',
                        top:0,                        // 定位 一半
                        left:'50%',
                        marginLeft:-480,
                    })

                    $('.menu_pos').show();
                }else{
                    $('.menu').css({                        // 对原来的样式进行覆盖
                        position:'static',
                        marginLeft:'auto',
                    })

                    $('.menu_pos').hide();
                }
            });
        })    </script>
    <style type="text/css">
        body{margin:0px;}
        .logo_bar{            width:960px;            height:200px;            background-color:#f0f0f0;            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(images/up.png) center center no-repeat #000;            border-radius:50%;            position:fixed;            right:50px;            bottom:50px;            display:none;        }
    </style></head><body>
    <p class="logo_bar">顶部logo</p>
    <p class="menu">置顶菜单</p>
    <p class="menu_pos"></p>
    <p class="down_con">
        <p style="color:red">网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
        <p>网站主内容</p>
    </p>
    <a href="javascript:;" class="totop"></a></body></html>

登录后复制

以上就是如何使用jquery制作置顶菜单的详细内容，更多请关注php中文网其它相关文章！