Show the Top Bar by scrolling up with sticky Foundation

Question

Show the Top Bar by scrolling up with sticky Foundation

Navigation

#1 by (1 votes)

2

An effect that I find interesting and quite useful, is to show the menu when it is scrolled up, and hide it when it goes down, although, downwards I can easily hide it with a display: none , using the class is-stuck is-at-top , of the sticky function of Foundation, however I do not know if this can be achieved in the same way activating it with a display: block , when scrolling up, the menu more or less goes like this

<div data-sticky-container>
  <div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%;">
    <div class="top-bar-left">
      <ul class="menu">
        <li><button class="hollow button border black-text" data-toggle="offCanvas"><i class="fi-list"></i></button></li>
        <li class="black-text"><%= link_to "Inicio", root_path, class: "bold" %></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="menu show-for-large">
        <li><%= link_to new_enterprise_registration_path, class: "button bold" do %><i class="fi-torsos-all"></i> Empresas<% end %></li>
      </ul>
    </div>
  </div>
</div>

javascript jquery foundation

asked by Hector Hernandez 23.09.2017 в 07:27

source

1 answer

Convert an xml into a string Problem reading characters with Scanf in C

score 1 · Accepted Answer

NO It is possible to achieve this effect with the Sticky tools in Foundation. Even if we could add a is-at-bottom at the time of scrolling up and show the menu, there would be no way to determine later that scrolls down to hide the menu. It would just be very complex and we risk damaging Sticky's performance.

Also, the only events that Sticky has are stuckto and unstuckfrom , there is no middle point if you are in the middle of the page and scroll down and up.

The solution would be without a doubt with pure Javascript or jQuery, something like that would be a starting point:

var lastScrollTop = 0;

window.addEventListener("scroll", function(){  
   var st = window.pageYOffset || document.documentElement.scrollTop;  
   if (st > lastScrollTop){
       document.getElementById("topmenu").style.top = "-100%";
   } else {
      document.getElementById("topmenu").style.top = "0";
   }
   lastScrollTop = st;
}, false);

body {
  margin: 0;
  background: honeydew;
}

#topmenu {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  background: hotpink;  
}

<div id=topmenu>
<span>top </span>
</div>

<div id=content>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>