JSFiddle - React, Tailwind, and code Playground

by Göran Andersson

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="wrap">
<nav class="block-links js-sticky-nav">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <h1>Sticky nav</h1>
            </div>
            <div class="col-sm-12">
                <nav>
                    <ul>
                        <li><a href="#one" class="js-sticky-link">One</a></li>
                        <li><a href="#two" class="js-sticky-link">Two</a></li>
                        <li><a href="#three%3f" class="js-sticky-link">Three?</a></li>
                        <li><a href="#four" class="js-sticky-link">Four</a></li>
                        <li><a href="#five" class="js-sticky-link">Five</a></li>
                    </ul>
                    <a href="#" class="animate">turn animation off</a>
                </nav>
            </div>
        </div>
    </div>
  </nav>


  <div class="container">
      <div class="row">
          <div class="col-sm-12">
              <div class="one block" id="one">
                  <h2>One</h2>
              </div>
          </div>
          <div class="col-sm-12">
              <div class="two block" id="two">
                  <h2>Two</h2>
              </div>
          </div>
          <div class="col-sm-12">
              <div class="three block" id="three?">
                  <h2>Three</h2>
              </div>
          </div>
          <div class="col-sm-12">
              <div class="four block" id="four">
                  <h2>Four</h2>
              </div>
          </div>
    ...

SCSS

.block{
    background: #ddd;
    height: 300px;
    margin: 0 0 10px 0;
    padding: 10px;
}

nav{
    margin: 20px 0;        
}

ul{
    list-style: none;
    padding: 0;
}

li{
    display: inline;
}

li a{
    background: red;
    color: white;
    padding: 10px;
}

li a:hover{
    background: gray;
    color: white;
    text-decoration: none;
}

.sticky {
	position: fixed;
	width: 100%;

	top: -$sticky-nav;
	z-index: 100;
	border-top: 0;
	
	ul{
		display: block;
	}
}

JavaScript

function animateLinks(){
	$('.js-sticky-link').on('click', function(e){
		e.preventDefault();
		var navHeight = $('.block-links').outerHeight(true);
    
		$('html, body').animate({
			'scrollTop': $($(this).attr('href').replace(/%3f/ig, '\\?')).offset().top-navHeight
		}, 1000);
	});
}

function dontAnimateLinks(){
  $('.js-sticky-link').off('click');
}

$(function(){
  animateLinks();
  var anim = true;
  $('.animate').click(function(e){
  	e.preventDefault();
    anim = !anim;
    $(this).text('turn animation o' + (anim ? 'ff' : 'n'));
    (anim ? animateLinks : dontAnimateLinks)();
  });
})

$(function(){

	var stickyNavTop = $('.js-sticky-nav').offset().top;

	var stickyNav = function () {

		var scrollTop = $(window).scrollTop();
		var navHeight = $('.block-links').outerHeight(true);

		if (scrollTop > stickyNavTop) {
			$('.js-sticky-nav').addClass('sticky');
		} else {
			$('.js-sticky-nav').removeClass('sticky');
		}
	};

	stickyNav();

	$(window).scroll(function () {
		stickyNav();

	});
});