Heim > Artikel > Web-Frontend > So erstellen Sie ein Sticky-Menü mit JQuery

So erstellen Sie ein Sticky-Menü mit JQuery

零到壹度Original: 2018-03-17 13:37:281393Durchsuche

Dieses Mal werde ich Ihnen einen praktischen Fall zeigen, wie Sie mit jquery ein Top-Menü erstellen. Das Folgende ist eine detaillierte Analyse.

jquery zum Erstellen eines Sticky-Menüs

<!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 zum Erstellen eines Sticky-Menüs

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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Sticky-Menü mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie JS, um den Status des Radios zu ändernNächster Artikel：So verwenden Sie JS, um den Status des Radios zu ändern

In Verbindung stehende Artikel

Mehr sehen