Bulma CSS ScrollDown Navbar

Question

Bulma CSS ScrollDown Navbar

Navigation

#1 by (1 votes)

2

On the official website of the Bulma CSS you can see that by scrolling down the page the navbar menu appears at the top. The transform property: translateY inspected in the browser appears to be used to project this effect. As Jquery does not use, how do I copy that same effect using only javascript / css?

css framework

asked by anonymous 12.12.2017 / 02:40

1 answer

added text with append does not respect div Firebase Insertion Problems

score 1 · Accepted Answer

Regardless of how the site quoted does, this effect is easily achieved using transition and position: fixed on div of the menu.

To hide the menu, you change the top to the value of the menu height in negative, and to show, top: 0 .

In the example below, this switch occurs when the value of scroll is greater or less than 20 pixels.

You can set the animation time to transition: top 0.3s; , where 0.3s means 300 milliseconds.

var srcl_dir = 20;
window.addEventListener('scroll', function(){
   var scrl = document.documentElement.scrollTop;
   if(scrl >= srcl_dir){
      document.querySelector("#menu").style.top = "-50px";
   }else{
      document.querySelector("#menu").style.top = "0";
   }
   
   srcl_dir = scrl <= 20 ? 20 : scrl;
});

html, body{
   margin: 0;
   padding: 0;
}

#menu{
   display: block;
   width: 100%;
   height: 50px;
   background: yellow;
   position: fixed;
   left: 0;
   top: 0;
   transition: top 0.3s;
}

#conteudo{
   display: block;
   height: 1200px;
   padding-top: 70px;
}

<div id="menu">
   menu
</div>
<div id="conteudo">
   conteúdo
</div>