SO 27752920: Active nav item doesn't switch until you scroll past the anchor target

https://stackoverflow.com/questions/27752920/

by Tugzrida

HTML

<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
 </head>
        <header>
          <div class="navbar-wrapper">
            <div class="container">
              <div id="navtop" class="navbar navbar-default navbar-fixed-top">
        
                <div class="navbar-header">
	               <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	               <span class="icon-bar"></span>
	               <span class="icon-bar"></span>
	               <span class="icon-bar"></span>
	               </a>
                   <a class="navbar-brand" href="#">The James Baldwin School</a>
                </div>
                
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#faculty">Faculty</a></li>
                        
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
              
                        <li class="dropdown">
                           ...

CSS

/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
  padding-top: 50px;
  padding-bottom: 40px;
  color: #5a5a5a;
}



/* NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.navbar-default {
	background-color: #763f8d;
	border-color: #5e2d73;
}
.navbar-default .navbar-brand {
	color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
	color: #ecdbff;
}
.navbar-default .navbar-text {
	color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
	color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: #ecdbff;
	background-color: #5e2d73;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	color: #ecdbff;
	background-color: #5e2d73;
}
.navbar-default .navbar-toggle {
	border-color: #5e2d73;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background-color: #5e2d73;
}
.navbar-default .navbar-toggle .icon-bar {
	background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
	border-color: #ffffff;
}
.navbar-default .navbar-link {
	color: #ffffff;
}
.navbar-default .navbar-link:hover {
	color: #ecdbff;
}

/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
    border-radius: 4px;
}


/* JamesBaldwin
-------------------------------------------------- */
a.banner_image{
    display:block; 
    margin-top:50px; /* adjust the margin, what will be the height of the navbar */
}


/* Jumbotron...