首页 > 文章 > web前端 > 如何使用jquery制作置顶菜单

如何使用jquery制作置顶菜单

零到壹度原创: 2018-03-17 13:37:281345浏览

这次给大家带来如何使用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) {                    // 注意是 “，” 
                    $(&#39;.menu&#39;).css({
                        position:&#39;fixed&#39;,
                        top:0,                        // 定位 一半
                        left:&#39;50%&#39;,
                        marginLeft:-480,
                    })

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

                    $(&#39;.menu_pos&#39;).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) {                    // 注意是 “，” 
                    $(&#39;.menu&#39;).css({
                        position:&#39;fixed&#39;,
                        top:0,                        // 定位 一半
                        left:&#39;50%&#39;,
                        marginLeft:-480,
                    })

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

                    $(&#39;.menu_pos&#39;).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中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JS怎样操作改变radio的状态下一篇：JS做到复制内容到剪贴板

查看更多