user3262111 user3262111 - 4 months ago 24
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.

<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 - 177
}, 1000);

return false;
}
}
});
});
</script>


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>

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

<div class="phone-h hidden-md hidden-lg">
<span><img src="http://gr8students.wpengine.com/wp-content/themes/devdmbootstrap3/img/phone-h.png"></span>
</div>
</div>

<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>
</ul>
</div>
</nav>

Answer

Working solution on JS Fiddle

HTML

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

jQuery

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

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