如何使用jquery制作置顶菜单

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

这次给大家带来如何使用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中文网其它相关文章！

jquery 置顶菜单 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

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