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

时间：2017-05-01 22:42:28

标签： 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>

问题是，当我在全屏上显示窗口时，它可以正常工作，然后我减小它的宽度并且没有条形显示（确定）但在此之后，当我再次增加宽度（全屏）时，不会出现粘贴的顶部菜单。

当我f5的窗口宽度小于980px（此处没有顶部栏 - 确定）然后全屏时，菜单显示并跟随滚动。然后我执行上述步骤并出现同样的问题。

也许这只是我错过的一个愚蠢的错误，但我相信这是因为我对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 个答案:

答案 0 :(得分：0)

您可以使用媒体查询来实现它，试试这个。 

   @media screen and (max-width: 980px) 
   {
   #moving_topbar 
    {
        display: none;
    }
 }
相关问题
最新问题