Fixed nav bar Active links?

by envira

HTML

<body>
    <div id="website_container">
        <div id="header">
            <img src="http://sphotos-a.xx.fbcdn.net/hphotos-snc7/381683_441832929209925_1111041917_n.jpg" width="66" height="70" alt="JL Fitness">
        </div>
        <div id="nav_contain">
            <div id="main_nav">
                <ul>
                    <a href="#blue_link"><li class="home_nav">Home</li></a>
                    <a href="#red_link"><li class="about_nav">About Me</li></a>
                    <a href="#purple_link"><li class="pricing_nav">Pricing</li></a>
                    <a href="#green_link"><li class="testimonial_nav">Testimonials</li></a>
                    <a href="#orange_link"><li class="contact_nav">Contact Me</li></a>
                    <a href="#header"><li class="to_top_nav">Back To Top</li></a>
                </ul>
            </div>
        </div>
        
        <div id="content_contain"> 
        
            <!-- Blue Block -->
        
            <div id="blue_block_top"><div id="blue_link"></div> </div>     
        
                <div class="blocks blue_block">
        
                    <h1>Homepage</h1>
                    
<p>CONTENT HERE</p>     
                    
                </div>
                
            <div id="blue_block_bottom"></div>
                
                <!-- Red Block -->
                
            <div id="red_block_top"><div id="red_link"></div></div>
        
                <div class="blocks red_block">  
                
                    <h1>About Me</h1>
                    
<p>CONTENT HERE</p>
                
                </div>
            
            <div id="red_block_bottom"></div>
            
            <!-- Purple Block -->
            
            <div id="purple_block_top"><div id="purple_link"></div></div>
        
                <div class="blocks purple_block">  
                
                    <h1>Pricing</h1>    
                    
                    <p>CONTENT...

CSS

/* ---------- Styles ---------- */

.active {
	background: #000000 !important;
}

h1 {
	color: #FFFFFF;
	font-family: bebas_neueregular, Verdana, Geneva, sans-serif;
	font-size: 1.7em;
	padding: 0em 0em 0.35em 0em;
	font-weight: normal;
}

p {
	color: #FFFFFF;
	font-family: bebas_neueregular, Verdana, Geneva, sans-serif;
	font-size: 1.1em;
	padding: 0em 0em 0.2em 0em;
	font-weight: normal;
}

#website_container {
	background: #333333;
	background-repeat: repeat;
	float:left;
	padding-bottom: 50px;
	height: auto;
	width: 100%;
}

/* HEADER */

#header {
	background: #DDDDDD;
	border-bottom: 2px solid #e0e0e0;
	-webkit-box-shadow: 0px 10px 10px rgba(0, 2, 0, 0.5);
	-moz-box-shadow:    0px 10px 10px rgba(0, 2, 0, 0.5);
	box-shadow:         0px 10px 10px rgba(0, 2, 0, 0.5);
	color: #33CCFF;
	font-family: bebas_neueregular, Verdana, Geneva, sans-serif;
	font-size: 30px;
	line-height: 120px;
	padding: 15px 5%;
	position: relative;
	height: 70px;
	width: 90%;
}

/* NAVIGATION BAR (CONTAINER) */

#nav_contain {
	height:72px;
	position: relative;
}

/* NAV BAR BEFORE SCROLL */

#main_nav {
	position: absolute;
	border-bottom: 2px solid #e0e0e0;
	height: 70px;
	width:100%;
}

/* NAV BAR AFTER SCROLL */

#main_nav.fixed {
	position: fixed;
	top: 0;
	background: #444444;
}

/* NAV BAR BUTTONS */

#main_nav ul li { 
	color: #FFFFFF;
	font-family: bebas_neueregular, Verdana, Geneva, sans-serif;
	font-size: 1em;
	float: left;
	height: 70px;
	line-height: 70px;
	list-style-type: none;
	text-align: center;
	width: 20%;	
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-ms-transition-duration: 0.5s;
	transition-duration: 0.5s;	
}

#main_nav a {
	color: #FFFFFF;
}

/* NAV BAR BUTTONS WITH BOTTOM ARROW ON HOVER */

#main_nav ul li:hover:after {
    background: url(http://upload.wikimedia.org/wikipedia/commons/7/71/Triangle_Down_filled_gray.svg);
    background-repeat: no-repeat;
    background-position-x: center;
   ...

JavaScript

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
 
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
 
  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
 
});

$(document).ready(function () {  
  var top = $('#main_nav').offset().top - parseFloat($('#main_nav').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
  
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#main_nav').addClass('fixed');
    } else {
      // otherwise remove it
      $('#main_nav').removeClass('fixed');
    }
  });
});



$(document).ready(function () {
var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() -  parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));
    
  var...