An effect that I find interesting and quite useful is to show the menu when scrolling up, and hide it when scrolling down, although I can easily hide it down with a display: none
, using the is-stuck is-at-top
Foundation sticky function class, However, I don't know if this can be achieved in the same way by 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>
It is NOT 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 showing the menu, there would be no way to determine later that scrolling down to hide the menu. It would just be too complex and we run the risk of breaking Sticky's performance.Also, the only events Sticky has are
stuckto
andunstuckfrom
, there is no midpoint in case you are in the middle of the page and scroll down and up.The solution would definitely be with pure Javascript or jQuery, something like this would be a starting point: