堆栈内存溢出
  繁体   English   中英

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

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

 原文  2017-05-01 22:42:28  0   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