-1

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>
vkopio
  • 914
  • 1
  • 11
  • 28
Ty T.
  • 586
  • 5
  • 18
  • can you please add more description, i can't understand what do you want, if possible show example online of a website or so – oqx Jul 25 '14 at 18:37
  • Well basically what I want is whenever I scroll down the page and and get to a section that coordinates with the anchor links #wheretogive, #bloodgo etc…. it will update in the nav also and highlight. kind of like this http://callmenick.com/lab-demos/7-single-page-smooth-scroll/ – Ty T. Jul 25 '14 at 18:39

2 Answers2

0

i recommend that you use spyscroll in bootstrap you'll notice that bootstrap uses the same side nave as the one that you are planning to use.

there are a question which deals with the same issue in a bit older version

if you still can't understand it i'll post a jsfiddle example

---edit

in this example you can see the nav bar down at the botton because we have no space to put it on the side.

to put your page into side and nav into the other you need to create 3col and 9col layout like this.

<div class="container">
<div class="row">
    <div class="col-md-3">
        <ul class="nav bs-docs-sidenav">
            ...
        </ul>
    </div>
    <div class="col-md-9">
        ...
    </div>
</div>

Community
  • 1
  • 1
oqx
  • 2,157
  • 17
  • 27
  • I kind of understand I think but would be good to see some sort of an example. – Ty T. Jul 25 '14 at 19:17
  • 1
    if it is working mark and answer so people would benefit from the question and see the right result. – oqx Jul 26 '14 at 00:46
0

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');
            }
        });
    }
});
Ankit Singhania
  • 1,010
  • 9
  • 17