2

Un efecto que me parece interesante y bastante util, es mostrar el menu cuando se escrolea hacia arriba, y ocultarlo cuando se va hacia abajo, si bien, hacia abajo facilmente puedo esconderlo con un display: none, usando la clase is-stuck is-at-top, de la funcion sticky de Foundation, sin embargo no se si esto se puede lograr de igual forma activandolo con un display: block, al scrolear hacia arriba, el menu mas o menos va asi

<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>

1 respuesta 1

1

NO es posible lograr este efecto con las herramientas de Sticky en Foundation. Aún si pudieramos agregar un is-at-bottom al momento de hacer scroll hacia arriba y mostrar el menú, no habría forma de determinar posteriormente que se hace scroll hacia abajo para ocultar el menú. Simplemente sería muy complejo y corremos el riesgo de dañar el funcionamiento de Sticky.

Además, los únicos eventos que tiene Sticky son stuckto y unstuckfrom, no hay un punto medio en caso que estés en el medio de la página y hagas scroll hacia abajo y hacia arriba.


La solución sería sin duda alguna con Javascript puro o jQuery, algo así sería un punto de partida:

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>

1
  • Agradezco mucho la aclaración, y ha funcionado perfectamente! =D Saludos! el 25 sep. 2017 a las 1:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.