Smart Fixed Navigation

index.html

<!-- Smart Fixed Navigation, from : https://codyhouse.co/gem/smart-fixed-navigation/ -->


<header><!-- ... --></header>
<div id="cd-nav">
    <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 
    <nav id="cd-main-nav">
        <ul>
            <li><a href="#0">Homepage</a></li>
            <li><a href="#0">Services</a></li>
            <li><a href="#0">Portfolio</a></li>
            <li><a href="#0">Pricing</a></li>
            <li><a href="#0">Contact</a></li>
        </ul>
    </nav>
</div>
<main><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque nisi vel mauris gravida, eu bibendum ligula accumsan. Quisque interdum in arcu a venenatis. Praesent ultricies eros vel auctor lobortis. Sed lorem libero, ultricies et condimentum sed, interdum in odio. Sed vel sem eu orci fermentum pretium. Praesent bibendum pellentesque lectus, eget tincidunt libero rhoncus at. Vestibulum quis odio ultricies, sodales mauris in, tempus tortor. Vivamus sit amet risus eu eros ullamcorper facilisis ut eu sapien.</p>

<p>In convallis tincidunt purus quis porta. Donec semper lorem et tincidunt accumsan. Morbi sed diam nec urna dictum consectetur. Aenean vel nibh feugiat, auctor elit quis, sagittis leo. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc dignissim egestas odio, non iaculis mauris rutrum a. Donec pretium feugiat ornare. Morbi pulvinar neque ornare, vehicula est eget, sollicitudin mauris. Maecenas convallis magna urna, eget pulvinar mauris laoreet ut. Ut posuere gravida tellus, ac auctor nisl vestibulum sit amet.</p>

<p>Vivamus id auctor nisi. Praesent ipsum mi, suscipit in arcu et, blandit iaculis libero. Sed vel lectus convallis, semper eros at, lobortis dui. Morbi sagittis nisi nec nisl volutpat accumsan. Nullam ullamcorper hendrerit arcu, id pretium nisl. Duis ullamcorper pharetra metus viverra aliquet. In eleifend auctor urna, eget dignissim tortor luctus vitae. Quisque ullamcorper mi nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et lorem vitae justo scelerisque hendrerit sed id libero. Sed varius eros non purus tempus malesuada. Aenean et elit non nunc semper viverra eu vel augue.</p>

<p>Morbi feugiat tortor diam, non aliquam urna congue quis. Pellentesque laoreet aliquam congue. Curabitur vel feugiat nulla, quis feugiat leo. Nam ut posuere tellus, sed faucibus arcu. Suspendisse potenti. Nulla ac lectus eu purus rhoncus tincidunt. Etiam mollis urna congue sem molestie volutpat. Nunc euismod ipsum vitae aliquet lacinia. Nulla et felis non velit fermentum congue. Nunc volutpat lectus lorem, in mattis lacus ultrices a. Aliquam eget nunc diam. Etiam rutrum hendrerit orci vitae ultrices. Cras pharetra odio justo, non elementum justo semper pretium.</p>

<p>Nunc et commodo ligula, consectetur rhoncus lectus. Etiam tincidunt semper odio nec posuere. Nam vulputate mauris id quam interdum malesuada. Mauris viverra venenatis ligula, rutrum lobortis tellus hendrerit a. Aliquam ut imperdiet lorem. Morbi vel varius lectus. Ut ut auctor lacus. Aenean sem tortor, consectetur eget semper eget, convallis et ante. Pellentesque placerat a nibh et faucibus. Donec non elementum ante. Nam vehicula porttitor nunc, sit amet adipiscing enim dignissim sit amet. In pellentesque mauris a eros accumsan, non mattis tellus auctor. Suspendisse a nisi eros. Aenean condimentum urna et eleifend auctor. Nam ut porttitor ipsum. Aliquam eu odio felis.</p></main>

script.js

jQuery(document).ready(function($){
	// browser window scroll (in pixels) after which the "menu" link is shown
	var offset = 300;

	var navigationContainer = $('#cd-nav'),
		mainNavigation = navigationContainer.find('#cd-main-nav ul');

	//hide or show the "menu" link
	checkMenu();
	$(window).scroll(function(){
		checkMenu();
	});

	//open or close the menu clicking on the bottom "menu" link
	$('.cd-nav-trigger').on('click', function(){
		$(this).toggleClass('menu-is-open');
		//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
		mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');

	});

	function checkMenu() {
		if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
			navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
				mainNavigation.addClass('has-transitions');
			});
		} else if ($(window).scrollTop() <= offset) {
			//check if the menu is open when scrolling up
			if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
				//close the menu with animation
				mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
					//wait for the menu to be closed and do the rest
					mainNavigation.removeClass('is-visible is-hidden has-transitions');
					navigationContainer.removeClass('is-fixed');
					$('.cd-nav-trigger').removeClass('menu-is-open');
				});
			//check if the menu is open when scrolling up - fallback if transitions are not supported
			} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
					mainNavigation.removeClass('is-visible has-transitions');
					navigationContainer.removeClass('is-fixed');
					$('.cd-nav-trigger').removeClass('menu-is-open');
			//scrolling up with menu closed
			} else {
				navigationContainer.removeClass('is-fixed');
				mainNavigation.removeClass('has-transitions');
			}
		} 
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

smart-fixed-navigation.markdown

Smart Fixed Navigation

from http://codyhouse.co/demo/smart-fixed-navigation/index.html

A Pen by salasks on CodePen.

License.

style.css

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Source Sans Pro", sans-serif;
  color: #2c3e51;
  background-color: #2c3e51;
}

a {
  color: #e84a64;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

xnugget info 

-------------------------------- */
.cd-nugget-info {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 30px;
  left: 0;
}
.cd-nugget-info a {
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #2c3e51;
  padding: .6em;
  border: 1px solid #2c3e51;
  border-radius: 0.25em;
}
.no-touch .cd-nugget-info a:hover {
  color: #fff;
  border: 1px solid #e84a64;
  background: #e84a64;
}
.no-touch .cd-nugget-info a:hover .cd-nugget-info-arrow {
  fill: #fff;
}
.cd-nugget-info span {
  vertical-align: middle;
  display: inline-block;
}
.cd-nugget-info span svg {
  display: block;
}
.cd-nugget-info .cd-nugget-info-arrow {
  fill: #2c3e51;
}
@media only screen and (min-width: 1170px) {
  .cd-nugget-info {
    bottom: 120px;
  }
}

/* -------------------------------- 

Main components 

-------------------------------- */
header {
  position: relative;
  height: 200px;
  background: white;
  text-align: center;
  margin-bottom: 1em;
  padding-top: 2em;
}
header #cd-logo {
  margin-bottom: 2em;
}
header h1 {
  font-size: 20px;
  font-size: 1.25rem;
}
@media only screen and (min-width: 768px) {
  header {
    margin-bottom: 4em;
  }
}
@media only screen and (min-width: 1170px) {
  header {
    height: 400px;
    padding-top: 11em;
  }
  header #cd-logo {
    position: absolute;
    top: 40px;
    left: 5%;
  }
  header h1 {
    font-size: 40px;
    font-size: 2.5rem;
    font-weight: 300;
  }
}

#cd-nav ul {
  /* mobile first */
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  background: white;
  visibility: hidden;
  /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
  overflow: hidden;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
#cd-nav ul.is-visible li:nth-child(1) {
  /* list items animation */
  -webkit-animation: cd-slide-in 0.2s;
  -moz-animation: cd-slide-in 0.2s;
  animation: cd-slide-in 0.2s;
}
#cd-nav ul.is-visible li:nth-child(2) {
  -webkit-animation: cd-slide-in 0.3s;
  -moz-animation: cd-slide-in 0.3s;
  animation: cd-slide-in 0.3s;
}
#cd-nav ul.is-visible li:nth-child(3) {
  -webkit-animation: cd-slide-in 0.4s;
  -moz-animation: cd-slide-in 0.4s;
  animation: cd-slide-in 0.4s;
}
#cd-nav ul.is-visible li:nth-child(4) {
  -webkit-animation: cd-slide-in 0.5s;
  -moz-animation: cd-slide-in 0.5s;
  animation: cd-slide-in 0.5s;
}
#cd-nav ul.is-visible li:nth-child(5) {
  -webkit-animation: cd-slide-in 0.6s;
  -moz-animation: cd-slide-in 0.6s;
  animation: cd-slide-in 0.6s;
}
#cd-nav li a {
  display: block;
  padding: 1.6em;
  border-bottom: 1px solid #eff2f6;
}
#cd-nav li:last-child a {
  border-bottom: none;
}
@media only screen and (min-width: 1170px) {
  #cd-nav ul {
    /* the navigation moves to the top */
    position: absolute;
    width: auto;
    max-width: none;
    bottom: auto;
    top: 36px;
    background: transparent;
    visibility: visible;
    box-shadow: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
  }
  #cd-nav li {
    display: inline-block;
  }
  #cd-nav li a {
    opacity: 1;
    padding: .4em;
    margin-left: 1.6em;
    border-bottom: none;
  }
  #cd-nav li a:hover {
    color: #00bd9b;
  }
  #cd-nav.is-fixed ul {
    /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
    position: fixed;
    width: 90%;
    max-width: 400px;
    bottom: 20px;
    top: auto;
    background: white;
    visibility: hidden;
    box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  #cd-nav.is-fixed ul li {
    display: block;
  }
  #cd-nav.is-fixed ul li a {
    padding: 1.6em;
    margin-left: 0;
    border-bottom: 1px solid #eff2f6;
  }
  #cd-nav ul.has-transitions {
    /* this class is used to bring back transitions when the navigation moves at the bottom right */
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  #cd-nav ul.is-visible {
    /* this class is used to bring back the navigation animation - as on touch devices */
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
    transition: transform 0.3s, visibility 0s 0s;
  }
  #cd-nav ul.is-hidden {
    /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
}

.cd-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}
.cd-nav-trigger span {
  /* the span element is used to create the menu icon */
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: #e84a64;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  content: '';
  position: absolute;
  left: 0;
  background: inherit;
  width: 100%;
  height: 100%;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s, background 0s;
  -moz-transition: -moz-transform 0.3s, background 0s;
  transition: transform 0.3s, background 0s;
}
.cd-nav-trigger span::before {
  top: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-nav-trigger span::after {
  bottom: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-nav-trigger.menu-is-open {
  box-shadow: none;
}
.cd-nav-trigger.menu-is-open span {
  background: rgba(232, 74, 100, 0);
}
.cd-nav-trigger.menu-is-open span::before, .cd-nav-trigger.menu-is-open span::after {
  background: #e84a64;
}
.cd-nav-trigger.menu-is-open span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-nav-trigger.menu-is-open span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 1170px) {
  .cd-nav-trigger {
    /* the the menu triger is hidden by default on desktop devices */
    visibility: hidden;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  .is-fixed .cd-nav-trigger {
    visibility: visible;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-animation: cd-bounce-in 0.3s linear;
    -moz-animation: cd-bounce-in 0.3s linear;
    animation: cd-bounce-in 0.3s linear;
  }
}

#cd-gallery-items li {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0.25em;
}
#cd-gallery-items li img {
  width: 100%;
  display: block;
  border-radius: 0.25em;
}
@media only screen and (min-width: 768px) {
  #cd-gallery-items li {
    width: 48%;
    float: left;
    margin-bottom: 2em;
    margin-right: 4%;
  }
  #cd-gallery-items li:nth-child(2n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 1170px) {
  #cd-gallery-items li {
    width: 31%;
    float: left;
    margin-bottom: 2.5em;
    margin-right: 3.5%;
  }
  #cd-gallery-items li:nth-child(2n) {
    margin-right: 3.5%;
  }
  #cd-gallery-items li:nth-child(3n) {
    margin-right: 0;
  }
}

@-webkit-keyframes cd-slide-in {
  0% {
    -webkit-transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-slide-in {
  0% {
    -moz-transform: translateX(100px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}
@keyframes cd-slide-in {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes cd-bounce-in {
  0% {
    -webkit-transform: scale(0);
  }

  60% {
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    -moz-transform: scale(0);
  }

  60% {
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-in {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }

  60% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}