|
<h1>Lorem ipsum</h1> |
|
<br> |
|
<div class="subnav navbar"> |
|
<div class="navbar-inner"> |
|
<div class="container"> |
|
<ul class="nav"> |
|
<li><a href="#one">One</a></li> |
|
<li><a href="#two">Two</a></li> |
|
<li><a href="#three">Three</a></li> |
|
<li><a href="#four">Four</a></li> |
|
<li><a href="#five">Five</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<section id="one"> |
|
<h4>One</h4> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. |
|
</p> |
|
</section> |
|
<section id="two"> |
|
<h4>Two</h4> |
|
<p>Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper. |
|
</p> |
|
</section><section id="three"> |
|
<h4>Three</h4> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras erat lectus, commodo vel faucibus rhoncus, mattis eget velit. Fusce in consequat orci. Integer nec tempor orci. Curabitur rutrum convallis semper. |
|
</p> |
|
</section><section id="four"> |
|
<h4>Four</h4> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eros nisi, vehicula eget fringilla consectetur, varius a diam. Donec suscipit justo in arcu luctus tincidunt. Integer commodo, nibh nec ullamcorper aliquam, orci est tincidunt dolor, sed semper ligula massa id massa. Vestibulum vitae neque sed nunc accumsan ultricies ac non ipsum. Phasellus blandit mauris eget nulla pulvinar rhoncus. Ut feugiat faucibus diam, non volutpat odio mollis a. Suspendisse potenti.</p> |
|
<p>Suspendisse sit amet sapien justo. Curabitur blandit turpis quis magna posuere eget scelerisque odio imperdiet. Cras iaculis lectus nec nisl aliquam vitae tempor dolor dictum. Cras condimentum enim vel risus elementum tempor. Praesent consectetur, elit et imperdiet pretium, eros ligula hendrerit lectus, id lobortis urna nulla at ipsum. Curabitur accumsan urna eu nisl rhoncus varius. Aliquam vel ligula sed nulla ornare elementum. Mauris ac tempor mi. Sed a adipiscing nisl. Donec vehicula lacus non urna feugiat porttitor. Donec non urna vel elit molestie lobortis.</p> |
|
</section><section id="five"> |
|
<h4>Five</h4> |
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eros nisi, vehicula eget fringilla consectetur, varius a diam. Donec suscipit justo in arcu luctus tincidunt. Integer commodo, nibh nec ullamcorper aliquam, orci est tincidunt dolor, sed semper ligula massa id massa. Vestibulum vitae neque sed nunc accumsan ultricies ac non ipsum. Phasellus blandit mauris eget nulla pulvinar rhoncus. Ut feugiat faucibus diam, non volutpat odio mollis a. Suspendisse potenti.</p> |
|
<p>Suspendisse sit amet sapien justo. Curabitur blandit turpis quis magna posuere eget scelerisque odio imperdiet. Cras iaculis lectus nec nisl aliquam vitae tempor dolor dictum. Cras condimentum enim vel risus elementum tempor. Praesent consectetur, elit et imperdiet pretium, eros ligula hendrerit lectus, id lobortis urna nulla at ipsum. Curabitur accumsan urna eu nisl rhoncus varius. Aliquam vel ligula sed nulla ornare elementum. Mauris ac tempor mi. Sed a adipiscing nisl. Donec vehicula lacus non urna feugiat porttitor. Donec non urna vel elit molestie lobortis.</p> |
|
</section> |
|
<script type="text/javascript"> |
|
$(document).scroll(function(){ |
|
var elem = $('.subnav'); |
|
if (!elem.attr('data-top')) { |
|
if (elem.hasClass('navbar-fixed-top')) |
|
return; |
|
var offset = elem.offset() |
|
elem.attr('data-top', offset.top); |
|
} |
|
if (elem.attr('data-top') - elem.outerHeight() <= $(this).scrollTop()) |
|
elem.addClass('navbar-fixed-top'); |
|
else |
|
elem.removeClass('navbar-fixed-top'); |
|
}); |
|
</script> |
