堆棧內存溢出
  簡體   English   中英

使用javascript和媒體查詢隱藏/顯示調整大小的粘性菜單div

[英]Hiding/showing a sticky menu div on resize using javascript and media queries

 原文  2017-05-01 22:42:28  3   1    javascript/ jquery/ html/ css

問題描述

我想要實現的是只有當瀏覽器窗口至少為980px寬時才有一個菜單欄粘在頂部。 當窗口調整為小於980px的寬度時，應該沒有顯示粘性菜單。 然后，將其調整為大小超過980px的寬度，菜單應該再次出現。

這是我的代碼： 

 var backup = $("#moving_topbar"); var buffer; var mql = window.matchMedia("(min-width: 980px)"); mql.addListener(showhidemenu); showhidemenu(mql); function showhidemenu(mql) { if (mql.matches) { $(window).scroll(function() { backup.append(buffer); if ($(window).scrollTop() > 96) { $("#moving_topbar").show(); } else { $("#moving_topbar").hide(); } }); } else { backup = $("#moving_topbar"); buffer = $("#moving_topbar").detach(); } } 
 /*those are inside separate css files*/ #moving_topbar { /*wide.css*/ position: fixed; margin-left: auto; margin-right: auto; width: 100%; height: 80px; background-color: #15d6a7; font-size: 20px; font-family: Verdana; color: #ffffff; display: none; } #moving_topbar { /*narrow.css*/ display: none; } 
 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" media='screen and (min-width: 980px)' href="wide.css" type="text/css" /> <link rel="stylesheet" media='screen and (max-width: 979px)' href="narrow.css" type="text/css" /> </head> <body> <div id="moving_topbar"> <div id="logodiv"> <img src="img/logo100.png" alt="Logo" class="rounded_corners_moving"> </div> <div id="socialtop_moving"> <div class="soc_icon_moving"> <!-- a, img (not important) --> </div> <div class="soc_icon_moving"> <!-- a, img (not important) --> </div> <div class="soc_icon_moving"> <!-- a, img (not important) --> </div> <div class="soc_icon_moving"> <!-- a, img (not important) --> </div> <div style="clear:both;"> </div> </div> <div id="menu_moving"> <div class="option_moving"> <b> ZAGRAJ </b> </div> <div class="option_moving"> <b> PROJEKTY </b> </div> <div class="option_moving"> <b> ARTYKUŁY </b> </div> <div class="option_moving"> <b> ENG </b> </div> <div style="clear:both;"> </div> </div> <div style="clear:both;"> </div> </div> </body>

問題是，當我在全屏幕上顯示窗口時它工作正常，然后我減小其寬度並且沒有條形顯示（確定）但在此之后，當我再次增加寬度（全屏）時，不會出現粘性頂部欄菜單。

當窗口寬度小於980px的f5（此處沒有頂欄 - 確定）然后全屏時，菜單顯示並跟隨滾動。 然后我執行上述步驟，並出現同樣的問題。

也許這只是我錯過的一個愚蠢的錯誤，但我相信這是因為我對javascript / jQuery的糟糕體驗。

工作代碼娛樂： 

<!DOCTYPE HTML>

<head>
    <style>
    @media screen and (min-width: 980px)
    {
        #topbar
        {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 120px;
            background-color: #15d6a7;
            font-size: 20px;
            font-family: Verdana;
            color: #000000;
        }

        #moving_topbar
        {
            position: fixed;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 80px;
            background-color: #15d6a7;
            font-size: 20px;
            font-family: Verdana;
            color: #000000;
            display: none;
        }
    }

    @media screen and (max-width: 979px)
    {
        #topbar
        {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding-top: 14px;
            padding-bottom: 1px;
            background-color: #15d6a7;
            font-size: 20px;
            font-family: Verdana;
            color: #000000;
        }

        #moving_topbar
        {
            display: none;
        }
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
        var backup = $("#moving_topbar"); 
        var buffer;
        var mql = window.matchMedia("(min-width: 980px)");
        mql.addListener(showhidemenu);
        showhidemenu(mql);

        function showhidemenu(mql)
        {
            if (mql.matches)
            {
                $(window).scroll(function()
                {
                    backup.append(buffer);
                    if($(window).scrollTop() > 96) { $("#moving_topbar").show(); }
                    else { $("#moving_topbar").hide(); }
                });
            }
            else
            {
                backup = $("#moving_topbar");
                buffer = $("#moving_topbar").detach();
            }
        }       
    </script>
</head>

<body>
    <div id="moving_topbar">
        <div id="logodiv"> img logo </div>
        <div id="socialtop_moving">
            <div class="soc_icon_moving"> moving img 1 </div>
            <div class="soc_icon_moving"> moving img 2 </div>
            <div class="soc_icon_moving"> moving img 3 </div>
            <div class="soc_icon_moving"> moving img 4 </div>
            <div style="clear:both;"> </div>
        </div>
        <div id="menu_moving"> 
            <div class="option_moving"> <b> moving menu 1 </b> </div>
            <div class="option_moving"> <b> moving menu 2 </b> </div>
            <div class="option_moving"> <b> moving menu 3 </b> </div>
            <div class="option_moving"> <b> moving menu 4</b> </div>
            <div style="clear:both;"> </div>
        </div>
        <div style="clear:both;"> </div>
    </div>

    <div id="topbar">
        <div id="logodiv"> some img </div>
        <div id="socialtop">
            <div class="soc_icon"> a, img </div>
            <div class="soc_icon"> a, img </div>
            <div class="soc_icon"> a, img </div>
            <div class="soc_icon"> a, img </div>
            <div style="clear:both;"> </div>
        </div>
        <div id="menu"> 
            <div class="option"> <b> menu1 </b> </div>
            <div class="option"> <b> menu2 </b> </div>
            <div class="option"> <b> menu3 </b> </div>
            <div class="option"> <b> menu4 </b> </div>
            <div style="clear:both;"> </div>
        </div>
        <div style="clear:both;"> </div>
    </div>

    <div style="width:500px;color:grey;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
    sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
    Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
    In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla
    </div>
</body>

很抱歉這個長期的lpsm ipsum但是有必要讓頁面可滾動。 也原諒我，但我不知道如何正確格式化代碼。

1 個解決方案

解決方案1
 0  2017-07-28 07:56:45

您可以使用媒體查詢來實現它，試試這個。 

   @media screen and (max-width: 980px) 
   {
   #moving_topbar 
    {
        display: none;
    }
 }

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 顯示/隱藏 <div> 使用JavaScript 使用javascript隱藏和顯示div 使用Java隱藏和顯示div系列 隱藏/顯示 <div> 用JavaScript 使用媒體查詢在調整大小窗口期間隱藏div 顯示/隱藏 <div> 用JavaScript 調整窗口大小時使用媒體查詢更改 div 寬度 使用Window.resize和媒體查詢移動div元素 帶有媒體查詢的Javascript菜單切換 使用JavaScript顯示/隱藏Div內容
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM