user3262111 user3262111 - 2 months ago 12x
CSS Question

Anchor highlight on scroll

I have a one page website that I would like the menu item to highlight on page scroll. I have the following JQuery but I do not know where to go from here.

$(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) {
scrollTop: target.offset().top - 177
}, 1000);

return false;

And the menu is setup up like this. I'm not sure if it matters but i'm using a nav walker in Wordpress. I'm hoping someone can point me in the right direction.

<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-1-collapse">
<div class="menu-txt">Menu</div>

<div class="phone-h hidden-md hidden-lg">
<span><img src=""></span>

<div class="collapse navbar-collapse navbar-1-collapse">
<ul id="menu-main-menu" class="nav navbar-nav">
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a title="How To Help" href="#howtohelp">How To Help</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a title="Perks &amp; Programs" href="#perksprograms">Perks &amp; Programs</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a title="Where To Give" href="#wheregive">Where To Give</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a title="The Process" href="#bloodgo">The Process</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a title="Contact" href="#contact">Contact</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a title="Stay In The Loop" href="#">Stay In The Loop</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a title="Check Your Stats" href="#">Check Your Stats</a></li>


Working solution on JS Fiddle


<section id="1">
<section id="2">
<section id="3">
<section id="4">
<div id="menu">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>


var timerid; //Used to fire scroll function once after scrolling is done.
    $("#menu a").click(function(e){
        $("#menu a").removeClass('active');
        var id = $(this).attr("href").substring(1);
            'scrollTop': $("section#" + id).offset().top
    $("body").scrollTop(1); //forcing window scroll to execute on page load
        timerid = setTimeout(checkactivelink, 50);

    function checkactivelink()
            if($("body").scrollTop() >= $(this).offset().top)
                $("#menu a").removeClass('active');
                    $("#menu a[href=#" + $(this).attr("id") + "]").addClass('active');