JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<header id="header">
    <div class="header-inner">
        <p>
            Header inner content.
        </p>
    </div>
    <nav class="nav stickyme">
        <div class="nav-inner">
            <p>
                Nav inner content.
            </p>
        </div>
    </nav>
</header>

<section id="wrapper">
    <div class="content">
        <div class="container-fluid">
            <p style="font-weight:bold;">
                A very long ipsum paragraph to make scrollable content.
            </p>
            <p>
                In tempus ultrices ligula, vitae rutrum tortor pellentesque nec. Suspendisse commodo purus quam, non suscipit ligula tristique at. Aliquam erat volutpat. Aliquam id est id odio euismod auctor ac at tellus. Mauris viverra lacus sit amet velit rhoncus pharetra. Nulla et ullamcorper sapien. Duis luctus erat magna, at auctor lorem faucibus eget.

Etiam nec lacinia quam. Maecenas eros neque, ullamcorper eu pharetra at, consectetur sit amet velit. Phasellus odio odio, ornare id diam nec, sagittis laoreet urna. Pellentesque volutpat et augue et mollis. Duis congue tellus et tortor pretium, sed efficitur eros maximus. Praesent dignissim magna in mi auctor dignissim. Etiam tincidunt tellus quis lorem ornare tincidunt. Vestibulum vel fermentum turpis.

Praesent odio dui, pulvinar id porttitor ut, malesuada non augue. Nullam quis blandit dolor. Aliquam erat volutpat. Morbi blandit egestas est vestibulum lobortis. Duis condimentum molestie dolor tincidunt porta. Nunc nec magna ut neque sodales sollicitudin vel at nunc. Maecenas sit amet lorem at tellus imperdiet interdum ut vel risus. Fusce ultricies consequat massa, vulputate tincidunt massa venenatis sed. Aliquam non felis vitae mauris iaculis congue a eu lorem. Integer non varius neque. Morbi viverra...

CSS

.header-inner {
    padding:20px 30px;
    width:100%;
    height:200px;
    background:brown;
    color:#fff;
}
.nav {
    padding:20px 30px;
    width:100%;
    height:60px;
    background:chocolate;
    color:#fff;
}
.content {
    padding:60px;
}
.newdiv {
    padding:20px;
    width:100%;
    height:60px;
    background:purple;
    color:#fff;
}

JavaScript

// USAGE

// Add the 'stickyme' class to the element you want to stick

// EXAMPLE: Take the 'stickyme' class off the nav
// and put it on the purple bar called 'newdiv'

$('.stickyme').addClass('stickyme-clone').clone().insertAfter('.stickyme').addClass('cloned-element-stickyme').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','999').removeClass('stickyme-clone').hide();
scrollIntervalID = setInterval(stickyme, 10);
function stickyme() {
	var orgElementPos = $('.stickyme-clone').offset();
	orgElementTop = orgElementPos.top;
	if ($(window).scrollTop() >= (orgElementTop)) {
		orgElement = $('.stickyme-clone');
		coordsOrgElement = orgElement.offset();
		leftOrgElement = coordsOrgElement.left;
		widthOrgElement = orgElement.css('width');
		$('.cloned-element-stickyme').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
		$('.stickyme-clone').css('visibility','hidden');
	} else {
		$('.cloned-element-stickyme').hide();
		$('.stickyme-clone').css('visibility','visible');
	}
}