<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="screen1"> <p>Scroll down</p> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </section> <section id="screen2"></section> <section id="screen3"></section>

/* Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS https://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/ Description: Create a sticky navigation bar that remains fixed to the top after scroll Author: Stan Kostadinov Author URI: https://stanhub.com Version: 1.0.0 - 11.01.2014 */ * {margin: 0; padding: 0;} a {text-decoration: none;} /* This class is added on scroll */ .fixed { position: fixed; top: 0; height: 70px; z-index: 1; } body { color: #fff; font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif; font-size: 18px; text-align: center; } /* Navigation Settings */ nav { position: absolute; bottom: 0; width: 100%; height: 70px; background: #fff; } nav li { display: inline-block; padding: 24px 10px; } nav li a { color: #757575; text-transform: uppercase; } section { height: 100vh; } /* Screens Settings */ #screen1 { background: #43b29d; } #screen1 p { padding-top: 200px; } #screen2 { background: #efc94d; } #screen3 { background: #e1793d; } @media only screen and (max-width: 520px) { nav li { padding: 24px 4px; } nav li a { font-size: 14px; } }

$(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; if ($(window).scrollTop() > navHeight) { $('nav').addClass('fixed'); } else { $('nav').removeClass('fixed'); } }); });