JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="page-wrapper">
			<div class="container">
				<div class="row">
					<div id="navigation-affix" data-spy="affix" data-offset-top="20" data-offset-bottom="200">
						<div class="col-xs-2" id="navigation-wrapper">
							<div class="inner">
								<div class="row">
									<div class="col-xs-12">
										<img src="http://i.imgur.com/O1tUgXR.png" alt="Liam Potter" id="picture-me" class="img-responsive">
									</div>
								</div>
								<div class="row">
									<div class="col-xs-12">
										<div id="navigation">
											<a href="/" id="current-page">Home</a>
											<a href="/portfolio">Portfolio</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="col-xs-offset-2 col-xs-10" id="content-wrapper">
						<div class="inner">
							<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ullam hic, iusto necessitatibus nostrum voluptas fugiat neque nobis odio dolorum, voluptate officia! Consectetur ipsam accusamus beatae hic, rerum quas officia!</div>
							<div>Perspiciatis, dolore eius. Velit cupiditate consequatur tempore amet rerum perspiciatis quae, libero, id, blanditiis molestias animi asperiores commodi sapiente, aut sint provident nemo nulla placeat consectetur quibusdam architecto eveniet saepe.</div>
							<div>Corporis officia reprehenderit ducimus cum quasi aspernatur nesciunt nobis saepe molestias doloremque, eius officiis amet, blanditiis dolorem, cupiditate veniam voluptatum maiores at. Beatae tenetur rerum error soluta illo reiciendis voluptatem.</div>
							<div>Maiores quas, consectetur molestiae inventore ipsum quisquam cum, nobis commodi voluptatem. Nostrum quas quam...

CSS

@charset "UTF-8";

* {
	font-family: 'Ubuntu', sans-serif;
}

html, body {
	width: 100%;
	height: 100%;
}

div#page-wrapper {
	min-height: 100%;
	height: auto !important;
	margin: 0 auto -100px;
}

div#page-push, footer {
	height: 100px;
}

footer {
	background: #111;
	color: white;
}

div#content-wrapper > div.inner {
	width: 95%;
	margin: 0 auto;
	
}
div#navigation-wrapper > div.inner{
  padding-top: 20px;
}
div#navigation {
	text-align: right;
	padding-top: 10px;
  position: fixed;
}

div#navigation > a {
	display: block;
	position: relative;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 18px;
	font-family: 'Ubuntu Condensed', sans-serif;
	color: #111;
	padding-right: 5px;
}

div#navigation > a:hover {
	color: #111;
}

div#navigation > a:after, div#navigation > a#current-page:after {
	content: "";
	position: absolute;
	width: 2px;
	height: 100%;
	right: 0;
	top: 0;
	background-color: #111;
	visibility: hidden;
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

div#navigation > a:hover:after, div#navigation > a#current-page:after {
	visibility: visible;
  	-webkit-transform: scaleY(1);
  	transform: scaleY(1);
}

div#navigation-affix {
	position: fixed !important;
}