Clever Geek Handbook

Hiding / showing sticky div menu on resize using javascript and media queries

I want to achieve that the menu bar is stuck on top only when the browser window is at least 980px wide. When the window is resized to less than 980 pixels wide, there should be no sticky menu. Then, resizing to more than 980 pixels wide, the menu should reappear.

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>
Run codeHide result


The problem is that when I f5 in the window in full screen mode, it works fine, then I decrease its width and no line is displayed (ok), but after that, when I increase the width again (full screen mode), no a sticky top bar menu appears.

When I f5 with a window width less than 980px (no top bar here - ok) and then in full screen mode, the menu is shown and rendered on scrolling. Then I follow the steps above and the same problem occurs.

Perhaps this is just a stupid mistake that I somehow missed, but I believe this is due to my poor javascript / jQuery experience.

Rest working code:

<!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 need to make the page scrollable. Also forgive me, but I don't know how to format the code correctly.

+3


source to share


1 answer


You can achieve this using media queries, try this.



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


source






More articles:


All Articles