Home > Article > Web Front-end > How to create a sticky menu using jquery

How to create a sticky menu using jquery

零到壹度Original: 2018-03-17 13:37:281346browse

This time I will bring you a practical case on how to use jquery to create a top menu. The following is a detailed analysis, let’s take a look.

jquery makes a sticky menu

<!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 makes a sticky menu

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

The above is the detailed content of How to create a sticky menu using jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS to change the status of radioNext article：How to use JS to change the status of radio

See more

How to create a sticky menu using jquery

Related articles