<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Nav Highlighter Plugin Demo</title>
<style>
ul.navHighlighter li:hover:after {
background: #fff;
}
.nav-active:after {
background: #fff;
}
ul.navHighlighter a {color:#fff;}
header {
height: 100%;
background-color:red;
}
.top {
padding-top: 65px;
background: white;
display: block;
}
ul.navHighlighter {
text-align: center;
position: fixed;
top: 0;
right: 0;
background: #00BCD4;
width: 100%;
margin: 0;
}
ul.navHighlighter li {
display: inline-block;
padding: 20px 20px;
}
ul.navHighlighter li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
}
li a:focus { outline: 0; }
li:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width 0.5s ease, background-color 0.5s ease;
}
li:hover:after {
background: #fff;
width: 100%;
}
.nav-active:after {
content: '';
display: block;
</style>
</head>
<body>
<header>
<h1>navHighlighter</h1>
</header>
<section class="top">
<nav class="top">
<ul class="navHighlighter">
<li><a href="#scrollnav1">Section 1</a></li>
<li><a href="#scrollnav2">Section 2</a></li>
<li><a href="#scrollnav3">Section 3</a></li>
<li><a href="#scrollnav4">Section 4</a></li>
</ul>
</nav>
</section>
<section class="main" style="margin:0 auto; max-width:960px">
</div>
<div id="scrollnav1">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur ad aliquam laboriosam aliquid consequatur impedit, molestias repudiandae. Odit consectetur amet nisi alias ab quaerat ut voluptas, ullam sapiente, vero dicta aperiam, aliquam mollitia nobis in nemo dolores eveniet dolor cum a, iste illum officiis. Aperiam maxime quas sint inventore optio quasi iure neque tempore est, perferendis adipisci, asperiores, nesciunt qui quia, iste esse commodi. Provident, eaque, dolores nobis, minus cum pariatur commodi dignissimos quibusdam culpa harum totam deserunt fuga voluptas libero repudiandae perferendis eligendi repellendus ad amet vitae delectus itaque! Consequuntur repellat libero, voluptas suscipit asperiores laborum, natus ratione inventore.</p>
</div>
<div id="scrollnav2">
<h2>Title 2</h2>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
<p>Laboriosam omnis eum voluptatem voluptatibus, iure ducimus exercitationem veritatis labore, maiores blanditiis dolorum eaque cumque corrupti obcaecati quae illum veniam! Velit molestias placeat porro tempora! Minus non accusamus, perferendis. Mollitia accusantium saepe veniam obcaecati rem, nemo molestiae delectus. Odio, consectetur ratione? Earum recusandae asperiores voluptatum porro officia at ratione tempora magni beatae temporibus labore ut ullam, distinctio provident sequi sapiente excepturi, obcaecati quisquam saepe ab eaque voluptates! Veniam adipisci vitae debitis dolor error explicabo alias inventore voluptas vel ad quo eos, esse distinctio impedit earum facilis eius maiores. Provident deleniti obcaecati, aspernatur maiores saepe sunt eveniet dicta repudiandae nemo iste.</p>
</div>
<div id="scrollnav3">
<h2>Title 3</h2>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
<p>Minima accusantium, ullam voluptate aperiam incidunt natus, maiores porro asperiores tempora, enim distinctio perferendis qui aliquam? Beatae numquam accusamus expedita porro suscipit architecto, nostrum eos impedit voluptates, reiciendis odit hic, laborum at ipsa animi nisi eius molestiae. Quibusdam et labore dolorem, exercitationem explicabo veritatis consequuntur suscipit quia rem eos facilis consequatur illo dolorum possimus est quod. Perspiciatis, earum, fuga? At accusamus eum minima quo error a voluptate. Animi architecto maiores laboriosam, accusamus quod placeat voluptatibus asperiores, non a perferendis corporis vel tempore obcaecati quos quibusdam dolores sequi quis tenetur deserunt. Nesciunt quos commodi sequi sit, doloremque tempora fugiat, necessitatibus neque.</p>
</div>
<div id="scrollnav4">
<h2>Title 4</h2>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
<p>Neque distinctio excepturi perferendis sapiente pariatur nesciunt culpa, exercitationem, itaque, fugiat dolorem animi nemo! Quae expedita pariatur tenetur sequi magni obcaecati qui vero cumque, veniam! Ad, dolore laudantium quas ipsam. Officiis animi corporis iste eligendi, id voluptatem adipisci beatae, sequi atque aut, iusto eaque odit consectetur cum laudantium earum cupiditate quis consequatur dolore vero, fugiat mollitia neque ipsum aperiam ad. Doloremque in soluta quaerat, quo beatae unde facilis nostrum omnis dolorem totam numquam ea, odio molestiae dolores fugit saepe eaque, maxime commodi nisi aliquam voluptatem! Illo porro expedita, incidunt a vitae dolorem quisquam veniam aperiam nesciunt magni, perferendis quis, accusantium.</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('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 - 80
}, 1000);
return false;
}
}
}); // code courtesy of CSS-Tricks
// apply the class of nav-active to the current nav link
$('a').on('click', function(e) {
e.preventDefault();
$('li.nav-active').removeClass('nav-active');
$(this).parent('li').addClass('nav-active');
});
// get an array of 'href' of each a tag
var navLink = $('ul.navHighlighter a');
console.log(navLink);
var aArray = [];
for(var i = 0; i < navLink.length; i++) {
console.log(i);
var aChild = navLink[i];
var navArray = $(aChild).attr('href');
console.log(navArray);
aArray.push(navArray);
console.log(aArray);
var selector = aArray.join(" , ");
console.log(selector);
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
var tops = [];
$(selector).each(function(){
var top = $(this).position().top -90;
if(scrollTop > top) {
var id = $(this).attr('id');
$('.nav-active').removeClass('nav-active');
$('a[href="#'+id+'"]').parent().addClass('nav-active');
}
tops.push(top);
});
});
});
</script></body>
</html>
Hello,
No comments:
Post a Comment