Change Active Menu item on page scroll

Question

I'm using a slightly modified version of this script in a single-page Wordpress site: Change Active Menu Item on Page Scroll?

All I changed was the menu UL id, the topMenuHeight and the duration of the scroll. For some reason, the first two items are working - scrolling from about to services works, but after that, nothing. I was outputting the 'id' var to the console and it was always showing services. Not quite sure what's up.

http://inspirawebdesign.us/

Answer 1

Personally I do not have a straight answer to the reason behind having to change the menu order but if you change the way the CSS is designed a little it can fix your issue.

As noted earlier you need to ensure that the 'li' links are all listed in the regular order.

From this point if you fix some CSS you can manipulate it to look the same.

Inside your CSS if you change Line 27-28 to this:

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {float: left; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

Basically instead of putting the #menu-main-menu li set to float right, you would change the menu to float right and the menu to float left to have it set to the proper order.

Inside of #menu-main-menu I added

float:right;

and inside of #menu-main-menu li I changed float:right to

float:left;

And if you want to see the code live here you go: http://jsfiddle.net/GpjMc/1/

---

You can also have it display inline instead of float:left as well. Whatever formatting works best for you.

#menu-main-menu {padding:30px 50px 0 0; float: right}
#menu-main-menu li {display: inline; list-style: none outside none; margin-left: 30px; text-transform: uppercase;}

Answer 2

You could use jQuery waypoints

http://imakewebthings.com/jquery-waypoints/

Then use jquery to change the active class when you scroll to a specific element

$('.thing').waypoint(function(direction) {
  jQuery("li.someItem").addClass("active");
});

Answer 3

You got the navigation menu with the list items, you only need to give your ul an id (in this case: top-menu)

In your html place the next code:

<ul id="top-menu">  
                <li class="active"><a href="#">item1</li>
                <li class=""><a href="#">item2</li>
                <li class=""><a href="#">item3</li>
                <li class=""><a href="#">item4</li>
                <li class=""><a href="#">item5</li>
</ul>

Put in your jquery file the next code:

// Cache selectors
var lastId,
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 click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
  offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 1000);
  e.preventDefault();
});

// 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 : "";

if (lastId !== id) {
   lastId = id;
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
}                   
});

and that's it. the id int the topmenu var is the same id as in your ul (in this case #top-menu) topMenu = $("#top-menu")