Hello,

 

I really hope somebody out there would be able to help me as I'm pulling my hair out trying to work this out.

 

 

Basically, I have created a website that has at the top menu:

 

Home | About | Services | etc etc

 

I have set up the website so that when you click on 'About' for example, it takes you to that part of the page anchor style. I have used some javascript so that when you click on About and it takes you to this part the About link turns blue, but what I can't work out is how to make this link turn blue if i was just to scroll down to this section.

 

Also, I have a couple of pages on the website that link to 'normal pages' - I need these to highlight blue also, but when I use the .current_page_item it turns all the pages blue when i'm back on the homepage.

 

Please tell me if that doesn't make sense!! Would appreciate any help!!!!!!

 

Thank you xx

jQuery waypoints is one way of doing it - maybe have a look at http://webdesign.tutsplus.com/articles/create-a-sticky-navigation-header-using-jquery-waypoints--webdesign-6408

hth

You basically need to bind to the scroll event like so :

// Cache selectors
var topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
});​

I found that here if you need to look further but it should work provided you style the "active" class like you would your .current_page_item

 

I'm not sure I understand the second part of your question. Do all your links have the .current_page_item class then? Otherwise can you inspect it to find out where the blue highlight is coming from?

Thank you so much for your help!

 

Sorry, i'm really new to jquery, so would I add this to my javascript file and then create a .active class?

 

Sorry to sound so amateur!

No problem, we've all been there

 

You would add this to a javascript file in your theme wrapped in a no-conflict wrapper like so:

jQuery(document).ready(function($) {

    // Your code goes here...

});

The script will add a class of active so you just have to lake sure you style it appropriately.

 

.active{
 color: turquoise; //or whatever
}

Brilliant, thank you so much!! So in the Jquery, would I need to change #topmenu to what my menu is called? Is there anything else I would need to change?

 

Thanks! )

Brilliant, thank you so much!! So in the Jquery, would I need to change #topmenu to what my menu is called? Is there anything else I would need to change?

 

Thanks! )

Providing your menu has an ID, then yes, that should work.. It would be like so: #menu (if your menu was <ul id="menu">).

 

However, here's the script I use. If it's too confusing or too much hassle to switch, just ignore it. I'll place it incase you find it easier.

 

$(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
        }, 1500);
        return false;
      }
    }
  });
})

I have this place in an external script, at the bottom of my page. It does it all for you. However, anchor tag link will scroll to whatever ID it is assigned to. For example:

<a href="#footer">Scroll to Footer</a>

^^ This will scroll to my ID of footer, with an animation.

 

 

Hope this may help?