堆栈内存溢出
  简体   繁体   English

使用javascript和媒体查询隐藏/显示调整大小的粘性菜单div

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

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

问题描述

What I want to achieve is to have a menu bar stuck to the top only when browser window is at least 980px wide. 我想要实现的是只有当浏览器窗口至少为980px宽时才有一个菜单栏粘在顶部。 When the window is resized to less than 980px of width there should be no sticky menu showing. 当窗口调整为小于980px的宽度时，应该没有显示粘性菜单。 Then, resizing it to more that 980px of width, the menu should appear again. 然后，将其调整为大小超过980px的宽度，菜单应该再次出现。

Here's my code: 这是我的代码： 

 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>

The problem is that when I f5 the window on fullscreen it works ok, then I reduce its width and no bar shows (ok) but after this, when I increase the width (fullscreen) again, no sticky topbar menu appears. 问题是，当我在全屏幕上显示窗口时它工作正常，然后我减小其宽度并且没有条形显示（确定）但在此之后，当我再次增加宽度（全屏）时，不会出现粘性顶部栏菜单。

When I f5 with window width smaller than 980px (no topbar here - ok) and then fullscreen, the menu shows and follows on scrolling. 当窗口宽度小于980px的f5（此处没有顶栏 - 确定）然后全屏时，菜单显示并跟随滚动。 Then I perform the steps described above and the same problem occurs. 然后我执行上述步骤，并出现同样的问题。

Maybe this is just a stupid mistake I somehow missed but I believe this occurs due to my poor experience with javascript/jQuery. 也许这只是我错过的一个愚蠢的错误，但我相信这是因为我对javascript / jQuery的糟糕体验。

Working code recreation: 工作代码娱乐： 

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

Sorry for this long lorem ipsum but it's necessary to make the page scrollable. 很抱歉这个长期的lpsm ipsum但是有必要让页面可滚动。 Also forgive me but I have no idea how to format the code properly. 也原谅我，但我不知道如何正确格式化代码。

1 个解决方案

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

You can achieve it by using media queries, try this. 您可以使用媒体查询来实现它，试试这个。 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 显示/隐藏 <div> 使用JavaScript - Showing/hiding <div> using javascript 使用javascript隐藏和显示div - Hiding and showing div, using javascript 使用Java隐藏和显示div系列 - Hiding and showing div series using Javascript 隐藏/显示 <div> 用JavaScript - Hiding/Showing <div> with JavaScript 使用媒体查询在调整大小窗口期间隐藏div - Hide div during resize window using media queries 显示/隐藏 <div> 用JavaScript - Showing/hiding <div> with JavaScript 调整窗口大小时使用媒体查询更改 div 宽度 - change div width using media queries when window resize 使用Window.resize和媒体查询移动div元素 - Using Window.resize and media queries to move a div element 带有媒体查询的Javascript菜单切换 - Javascript Menu toggle with Media Queries 使用JavaScript显示/隐藏Div内容 - Showing / Hiding Div Content with JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM