Menu slide down on scroll

Working animation on slide up and down.

by 8ogdan

HTML

<div class="sticky-wrap">
    <div class="sticky-menu">
      Navigation here
    </div>
  </div>
  
  
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a metus maximus risus volutpat viverra eget eget elit. Pellentesque tellus felis, consectetur ac pharetra eu, hendrerit nec quam. Aliquam sed interdum velit. Etiam commodo tincidunt dictum. Fusce porttitor mattis mauris at varius. Donec sollicitudin aliquet aliquam. Donec rutrum sit amet lectus in ultrices. Nulla non tortor enim. Vestibulum ut pretium felis, eget placerat augue. Proin facilisis facilisis consectetur. Nam ultricies consequat sapien, sit amet rutrum orci viverra vel. Donec at quam id velit tincidunt gravida at a eros. Aenean libero est, blandit eget erat sed, ultrices tempor sem. In vel mattis mauris. Quisque condimentum ut ante eget commodo. Vestibulum feugiat quam luctus diam placerat, ut gravida ligula viverra.<br/><br/>
Suspendisse dignissim tellus non est ultrices faucibus. Sed rutrum dui vel leo eleifend, nec placerat lectus venenatis. Fusce dolor turpis, fringilla ut ullamcorper vel, ultrices eget purus. Nullam euismod, felis eget finibus facilisis, odio turpis posuere justo, id malesuada velit est vitae ex. Proin tempus ante at turpis tempor elementum. Duis pellentesque justo orci, sed eleifend libero dapibus condimentum. Integer ac velit condimentum, suscipit lectus sed, lobortis erat. Etiam consectetur eu augue sit amet sodales. Donec nec nisi eget ipsum convallis congue quis a neque. Sed eget condimentum risus. Duis pulvinar ex non velit bibendum vehicula. Nulla nec risus id nulla facilisis commodo ut sit amet nisi. Curabitur at odio at risus porttitor sodales sit amet vitae ligula.<br/><br/>
Sed porta neque eget tempor suscipit. In sapien lorem, pulvinar eget aliquam a, fermentum a tellus. Quisque at eleifend lacus. Nam luctus augue eget ligula porta laoreet. Donec luctus arcu est, non cursus risus tempus vehicula. In pretium arcu quis tempor...

CSS

* {
  box-sizing: border-box;
}

body {
  padding:0;
  margin:0;
  background: #f3f3f3;
}

.sticky-wrap {
  position: fixed;
  botttom: 80px;
  left: 0px;
  width: 100%;
  height: 70px;
  padding: 10px 0;
  background: #42bdc2;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
    z-index: 1;
}

.sticky-wrap .sticky-menu {
  max-width: 960px;
  margin: 0 auto;
  height: 100%;
      color: #fff;
      display: flex;
      align-items: center;
}

.content {
    width: 90%;
    height: 700px;
    background-color: #e1e1e1;
    z-index:0;
    position:relative;
    margin: 0 auto;
    padding: 40px;
    padding-top: 120px;
}

JavaScript

/* get window size */
var windowSize = $(window); 

windowSize.scroll(function() {
	
	/* Get distance from the top */
	var top = windowSize.scrollTop();
	
	if(top > 175) {
		$(".sticky-wrap").css("bottom","0");
	}
	
	if(top < 175) {
		$(".sticky-wrap").css("bottom","80px");
	}
  
});