Bulma CSS Scrolldown Navbar

Asked

Viewed 213 times

2

On the official website of Bulma CSS you can see that when you scroll down the page the navbar menu appears at the top. The Transform: translateY property inspected in the browser appears to be used to design this effect. Since there is no use of Jquery, how to copy this effect using javascript/css only?

css framework
  • 1

    On the contrary, when it rolls down, the menu disappears, then it rolls up and it appears. It wouldn’t be that?

  • No ...when the page scrolls down the fixed menu at the top. When the menu scrolls up it goes away. But regardless of this. How is this action happening? did not find the js or css that is running this operation

  • 1

    With me as with the DVD, rolled down disappeared, but a small scroll up the menu appeared, regardless of the position of the page.

1 answer

1


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

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

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

You can adjust the animation time in 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>

Browser other questions tagged css framework

You are not signed in. Login or sign up in order to post.