Navbar in sttilul eMag 2

Navbar cu Resigilate, Descriere, Produse compatibile, Specificatii, Review-uri

by 8ogdan

HTML

<div id="screen1">
  screen
</div>
 <div id="menu">
     THIS IS THE MENU<br />
     and I don't want to abruptly jump to the top but to gently slide to it on scroll and then stick to it
    </div>


<div id="screen2">
     Rest of the page bla bla
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     keep scrolling
</div>

CSS

html,
body{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
  position:relative;
}
#screen1{
	min-height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
}

#menu{
  transition:0.2s;
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top:calc(100% - 100px);
	background-color: #009900;
	/*unimportant*/border-top: 2px solid #333;
  /*unimportant*/color: #fff;
  /*unimportant*/text-align: center;
   /*unimportant*/font-size: 20px;
}
#screen2{
  width: 100%;
  background-color: #f4452a;
  /*only for example*/height: 1000px; 
  /*unimportant*/padding-top: 200px;
  /*unimportant*/text-align: center;
}

JavaScript

//$(document).ready(function(){
//    $("#menu").sticky({topSpacing:0});
//  });

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});