Responsive Slide Down A Sticky Navbar On Scroll

index.html

<header>
	<h1>LOGO</h1>
	<p>Description</p>
</header>
<nav id="sticky_nav">
	<div class="container_left">
		<a class="home" href="https://codepen.io/uzcho_/" target="blank_">
			<i class="fa fa-home"></i>
		</a>
		<button id="btnMenu" onclick="openMenu()">
			<i class="fa fa-bars"></i>
			<i class="fa fa-close"></i>
		</button>
	</div>
	<div class="container_menu" id="thisMenu">
		<div class="container_list">
			<button class="btnList" onclick="openList('1')">
				<span class="drop">Dropdown 1</span>
				<span class="acc">Accordion 1</span>
			</button>
			<div class="content_list left" id="thisList_1">
				<p>1<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
			</div>
		</div>
		<div class="container_list">
			<button class="btnList" onclick="openList('2')">
				<span class="drop">Dropdown 2</span>
				<span class="acc">Accordion 2</span>
			</button>
			<div class="content_list left" id="thisList_2">
				<p>2<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
			</div>
		</div>
		<div class="container_list">
			<button class="btnList" onclick="openList('3')">
				<span class="drop">Dropdown 3</span>
				<span class="acc">Accordion 3</span>
			</button>
			<div class="content_list center" id="thisList_3">
				<p>3<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
			</div>
		</div>
		<div class="container_list">
			<button class="btnList" onclick="openList('4')">
				<span class="drop">Dropdown 4</span>
				<span class="acc">Accordion 4</span>
			</button>
			<div class="content_list right" id="thisList_4">
				<p>4<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
			</div>
		</div>
		<div class="container_list">
			<button class="btnList" onclick="openList('5')">
				<span class="drop">Dropdown 5</span>
				<span class="acc">Accordion 5</span>
			</button>
			<div class="content_list right" id="thisList_5">
				<p>5<br>Lorem ipsum<br>Lorem ipsum<br>Lorem ipsum</p>
			</div>
		</div>
	</div>
	<div class="container_right">
		<div class="content_search" id="thisSearch">
			<form><input type="text" placeholder="Search..."></form>
		</div>
		<button id="btnSearch" onclick="openSearch()">
			<i class="fa fa-search"></i>
			<i class="fa fa-close"></i>
		</button>
	</div>
</nav>
<div class="title">
	<h2>Responsive Slide Down A Sticky Navbar On Scroll</h2>
</div>
<div class="blank"></div>

<!-- This is not part of Pen -->
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#fff"></a>

responsive-slide-down-a-sticky-navbar-on-scroll.markdown

Responsive Slide Down A Sticky Navbar On Scroll

Responsive Sticky Navbar On Scroll with "Dorpdown Menu" / "Accordion" by using CSS & JavaScript. In large screen, "List Menu" look like "Dropdown", but in small screen, "List Menu" look like "Accordion". In this case the "Sticky NavBar" will be "Slide Down" when the user starts to "Scroll Down" the page and when you clicked the "Dropdown Button" and you "Scrolled Up" the page, NavBar will be hidden, but the "Dropdown Menu" will be Sticky on the top. Try it in small screen. No library like jQuery is required. No plugin needed.

A Pen by Cameron on CodePen.

License.

script.js

window.onscroll = function(){
   scrollFunction()
}
function scrollFunction(){
   var sn = document.getElementById("sticky_nav");
      if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100){
         sn.style.top = "0"
      }
      else{
         sn.style.top = "-45px"
      }
}

function openList(x){
   var cL = document.getElementsByClassName("content_list");
   var i;
      for(i = 0; i < cL.length; i++){
         var OcL = cL[i];
            if(cL[i] != document.getElementById("thisList_" + x)){
               OcL.classList.remove("show_list")
            }
      }
   document.getElementById("thisList_" + x).classList.toggle("show_list")
}

function openSearch(){
   document.getElementById("thisSearch").classList.toggle("show_search");
   document.getElementById("btnSearch").getElementsByTagName("i")[0].classList.toggle("hidden");
   document.getElementById("btnSearch").getElementsByTagName("i")[1].classList.toggle("visible")
}

function openMenu(){
   document.getElementById("thisMenu").classList.toggle("show_menu");
   document.getElementById("btnMenu").getElementsByTagName("i")[0].classList.toggle("hidden");
   document.getElementById("btnMenu").getElementsByTagName("i")[1].classList.toggle("visible")
}

style.css

a{display:block}
body{background:#262626;text-align:center}

body,button
	{font-family:Tahoma,Geneva,sans-serif;font-style:normal;font-weight:400}

button
	{margin:0;border:none;cursor:pointer}

button:focus
	{background:#808080;color:#000}

button,p,.home
	{font-size:14px}

button,
.home{
	background:transparent;
	padding:14px;
	color:#a3a3a3;
	vertical-align:middle
	}

button:hover,.home:hover
	{background:#4d4d4d;color:#fff}

h1,h2{font-size:30px}

h1,p
	{margin:0;padding:0}

[class*="container"]
	{display:block;position:relative;float:left}

[class*="content"]
	{display:none;position:absolute;z-index:10}

.home,#btnMenu
	{position:relative;float:left}

#btnMenu,.fa-close,.acc
	{display:none}

.content_list:before,
h2:before,
h2:after
	{content:"";display:block;position:absolute}

header{
	width:100%;
	padding:16px;
	display:block;
	position:absolute;
	z-index:10;
	box-shadow:0 8px 6px -6px #000
	}

header h1,header p
	{letter-spacing:5px;text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff}

#sticky_nav{
	background:#000;
	width:100%;
	top:-45px;
	display:block;
	position:fixed;
	z-index:999;
	transition:all .5s ease
	}

.btnList{width:120px}

.content_list
	{background:#fff;width:250px;top:45px}

.content_list.left,
.content_list.left:before
	{left:0}

.content_list.center{left:-65px}

.content_list.center:before
	{left:50%;transform:translate(-50%,0)}

.content_list.right,
.content_list.right:before
	{right:0}

.content_list:before{
	width:8px;
	top:-8px;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-bottom:8px solid #fff
	}

.container_right{float:right}

.content_search
	{background:#000;top:0;right:40px}

input[type=text]{
	background:#fff;
	width:100%;
	font-size:22px;
	border-radius:5px
	}

@media (max-width:683px){
	#btnMenu{display:block}
	.container_menu{display:none}
	.container_list{width:100%}
	
	.btnList
		{width:100%;box-shadow:0 2px 2px -2px #333}
	
	.drop{display:none}
	.acc{display:inline-block}
	
	.content_list{
		width:100%;
		top:0;
		position:relative;
		float:left
		}
	
	.content_list.left,
	.content_list.center,
	.content_list.right
		{left:0;right:0}
	
	.content_list.left:before,
	.content_list.center:before,
	.content_list.right:before
		{left:50%;transform:translate(-50%,0)}
	
	.show_menu{
		background:#1a1a1a;
		width:100%;
		top:45px;
		display:block;
		position:absolute
		}
	}

.title,.blank{
	width:100%;
	min-height:100%;
	display:block;
	position:relative;
	float:left
	}

h2{
	width:100%;
	top:50%;
	left:0;
	margin:0;
	padding:0 8px;
	display:block;
	position:absolute;
	color:#fff;
	transform:translate(0,-50%)
	}

h2:before,h2:after{
	width:50px;
	height:50px;
	left:50%;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	animation:buble 1s linear infinite alternate
	}

h2:before{bottom:-100px}
h2:after{bottom:-110px}

@keyframes buble{
	from{transform:rotate(45deg) translate(-50%,0) scale(.8,.8)}
	to{transform:rotate(45deg) translate(-50%,0) scale(1,1)}
	}

.blank{background:#262626}

.visible{display:inline-block}
.hidden{display:none}
[class*="show"]{display:block}

.show_list
	{padding:20px 0;animation:height 1s ease}

@keyframes height{
	from{padding:0;opacity:0}
	to{padding:20px 0;opacity:1}
	}

.show_search form
	{width:150px;padding:6px;animation:width 1s ease}

@keyframes width{
	from{width:0;opacity:0}
	to{width:150px;opacity:1}
	}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://codepen.io/uzcho_/pen/RmOWmw.css" rel="stylesheet" />