Navbar with dropping section link.

Navbar with dropping section link.

by Carin Camen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav>

   <div class="nav navbar">
        <ul class="nav navbar navbar-header">
                <li><a href="#section01" class="active">Section01</a>
                </li>
                <li><a href="#section02">Section02</a>
                </li>
                <li><a href="#section03">section03</a>
                </li>
                <li><a href="#section04">Section04</a>
                </li>
            </ul>
    </div>
</nav>



<div id="section01" class="par">
    <h1>Section 01</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis, lacus gravida pharetra posuere, neque ligula malesuada mi, ac accumsan turpis neque sit amet libero. Morbi a hendrerit nibh, sed tristique turpis. Vivamus hendrerit tincidunt urna nec laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent faucibus quis diam et auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ornare dui at nulla eleifend pharetra. </p>
</div>

<div id="section02" class="par">
    <h1>This is Section 02</h1>
    <p>Etiam erat eros, aliquam nec gravida vel, consectetur quis elit. Mauris convallis viverra purus ac facilisis. Mauris non libero vitae purus molestie accumsan sed vel urna. Fusce in laoreet justo, blandit vestibulum odio. In bibendum nunc id eros vehicula tristique. Suspendisse nec neque facilisis, commodo leo ac, gravida tellus. Duis tincidunt lacus in pretium bibendum. Donec elementum velit vel faucibus ornare. Vestibulum velit arcu, bibendum non laoreet nec, scelerisque eget ligula. Praesent sed euismod massa. Nullam dictum dolor eu consequat...

CSS

nav{
    position: fixed;
    top: 2%;
    width: 100%;
    height: 50px;
    background-color: rgb(71,72,76);
    z-index: 9999;
}

.navbar {
    position: relative;
    top: -45%;
    left: -20%;
    width: 100%;
    padding: 3px;
}

.navbar-header{
    position: relative;
    margin: 10px;
    left: 10%;
    padding-left: 10%;
}

.navbar ul {
    margin: 10px;
    width: 100%;
    padding: 3px;
    padding-left: 10%;
}

.navbar ul li {
    text-align: left;
    display: inline-block;
    color: rgb(113,135,133);
    background-color: none;
}

.navbar ul li a{
    color: rgb(113,135,133);
    background-color: none;
}

/*---add this to remove li background color from bootstrap and to have text change color on hover---*/
.nav>li>a:hover, .nav>li>a:focus{
    background-color: transparent;
     color: rgb(207,219,218);
}

.nav ul li a.active {
    color: rgb(207,219,218);
    text-transform: uppercase; 
    top: 15px;
}

#section01 {
    position: absolute;
    padding-top: 50px;
    top: 1%;
    left: 0;
    height: 30px;
    width: 420px;
}

#section02 {
    position: absolute;
    padding-top: 50px;
    top: 80%;
    left: 0;
    height: 50px;
    width: 420px;
}

#section03 {
    position: absolute;
    padding-top: 50px;
    top: 150%;
    left: 0;
    height:50px;
    width: 420px;
}

#section04 {
    position: absolute;
    padding-top: 50px;
    top: 220%;
    left: 0;
    height: 50px;
    width: 420px;
}

JavaScript

$(document).ready(function($){
          var parPosition = [];
        $('.par').each(function() {
            parPosition.push($(this).offset().top);
        });
        
		$('a').click(function(){
			$('html, body').animate({
				scrollTop: $( $.attr(this, 'href') ).offset().top
			}, 500);
			return false;
		});
        
        	$('nav .navbar ul li a').click(function () {
			$('nav .navbar ul li a').removeClass('active');
				$(this).addClass('active');   
		}); 
            
           $(document).scroll(function(){
        var position = $(document).scrollTop(),
                index; 
                for (var i=0; i<parPosition.length; i++) {
                if (position <= parPosition[i]) {
                    index = i;
                    break;
                }
                    
            }
      $('nav .navbar ul li a').removeClass('active');
            $('nav .navbar ul li a:eq('+index+')').addClass('active');
        });
        
        	$('nav .navbar ul li a').click(function () {
			$('nav .navbar ul li a').removeClass('active');
				$(this).addClass('active');
		});   
	});