JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        howtoshots - test
    </title>
    </head>
<body>
<div class="content-wrap">
    <div class="container" id="container">
        <div class="content-nav">
            <div>
               <ul>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
                   <li><a href="#">link1</a></li>
               </ul>
            </div>
        </div>
        <div class="content-main">
            <div class="content-inner">
                <p>
                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum laborum nemo sit officiis eveniet ipsa non tempora consequuntur temporibus minus odio saepe dolorem rerum rem quidem laboriosam officia quo fugit!</span>
                    <span>Corrupti autem asperiores incidunt architecto nam odit alias reprehenderit ullam amet nisi sit pariatur quasi consectetur consequuntur excepturi optio numquam vitae facere dolore accusamus eum iure nesciunt quisquam. Alias doloribus!</span>
                    <span>Unde facere corrupti consequuntur dignissimos sapiente rerum enim quaerat aliquid nostrum cum iure mollitia modi dolorum minus animi vitae quis dolor odit velit est repellendus quibusdam eveniet autem blanditiis ut.</span>
                    <span>Accusantium quas incidunt doloribus dignissimos repudiandae delectus voluptas quibusdam porro...

CSS

.container,.navbar-static-top .container{
width:940px;
padding-left: 10px;
padding-right: 10px;
}

.container {
margin-right:auto;
margin-left:auto;
zoom:1;
}

.container:before,.container:after {
display:table;
line-height:0;
content:"";
}

.container:after {
clear:both;
}

.content-wrap {
margin-top:50px;
margin-bottom:50px;
}
.fulldivider {
  box-shadow: 0px 1px 10px rgba(0,0,0,.1);
border-bottom: 1px solid #000;
height: 1px;
}
.content-main {
float:left;
width:760px;
}

.content-nav {
float:left;
margin-top:40px;
width:180px;
height: 100%;
}

.content-nav-inner,.affix {
  position: fixed;
  width: 180px;
  float: left;
}
.content-nav ul {
  margin-left: 5px;
}
.content-inner {
background:none repeat scroll 0 0 #FFF;
border:1px solid #000;
position:relative;
z-index:100;
padding:50px;
}


.content-nav li {
list-style:none outside none;
margin-left:0;
margin-bottom:0;
}

.content-nav li a {
text-decoration:none;
box-shadow:0 1px 0 #FFF;
color:#000;
display:block;
font-size:15px;
font-weight:300;
padding-bottom:8px;
padding-top:11px;
position:relative;
transition:all .2s ease-in-out 0;
width:180px;
}

.footerul {
  width: 800px !important;
  margin: 0 auto;
}
.footerul ul{
 float: left;
 list-style: none;
 padding-top: 25px;
 padding-bottom: 25px;
 margin-right: 30px;
}
.ultitle {
font-weight: 35px;
font-size: 18px !important;
padding-bottom: 10px !important;
}
.footerul ul li {
  line-height: 25px;
}
.footerul ul li a {
font-size: 15px;
}
.footerul ul li a:hover {
border-bottom:1px dotted;
}
.footerul ul.lastul {
  margin-right: 0px;
}
.footer {
  /*background-color: #e5e5e5;*/
  border-top: 1px solid #ffffff;
  background: #fff;
}

JavaScript

$(function() {

    var $sidebar   = $(".content-nav"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});