Menu Trouble

Look at your <header class=" on each page.
About me and Portfolio are both

<header class="page2">

Select allOpen in new window

Change Portfolio to

<header class="page3">

Select allOpen in new window

Should fix the problem

Hello, thank you for your quick response. In the html page, I have <div id="page3" class="content"> for the Portfolio. I'm not seeing <header class="page2"> for Portfolio. Where are you seeing this? Thanks!

The problem is being caused in the way the javascript is responding to the scroll event. For some reason (as yet unknow - still investigating) the scroll event (which is triggered when you click a menu item) is not resulting in the correct page index being selected - the same one is being selected when you click About as when you click Portfolio.

The way the menu works is you click an item it then scrolls to the corresponding section on the page. It uses the scrollTop value as an index into a precalculated array to work out which item was clicked and then uses this value to index another array to get a class value (page1, page2 etc) which it then assigns to the <header> element at the top of the page. The css is linked to this class value.

So because the two menu items in question are resulting in the same class value being selected you are seeing the About being selected when you are on the Portfolio section.

I am still debugging ....

@jullianH, maybe we can figure this out together.

The scroll event fires repeatedly when the document is being scrolled. Inside the scroll event there is a while loop. Inside that, a conditional that says whenever the currClass is NOT equal to the current indexed section name in the array. So it's true more often than false. What I think is happening is that the statements inside the conditional are busy changing the currClass to say "page2" then "page3" etc. while the outer scroll event is still firing and finishing well past the scroll position of "page2". The match up is just being missed because the scrolling is too fast when automated so the last update of currClass sticks. The major clue is that the code inside the scroll event works perfectly when scrolling the page manually. In that situation, there's plenty of time for the while loop and the conditional statements to finish.

I came close to a solution by creating a global boolean variable called userScroll, set to true, and wrapped everything inside the scroll event handler with a conditional:

if (userScroll) {
...
}

That prevents the scroll event from firing automatically when goToByScroll() is called to animate the scroll.

Then I set up the goToByScroll function like this:

function goToByScroll(id){
      userScroll = false;                              
      $('header').removeAttr("class").addClass(id);
      $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow', function(){
            userScroll = true;
      });
}

The scroll event handler is bypassed for the animated scroll. And it worked except that the active navigation box would not slide into place unless you remained hovered over it while the page scrolled.

Still have not figured out why.

@tommyboy - seems the author has found a solution but I am still intrigued so going to respond to your post.

The multiple firing of the scroll event is valid - but what intrigues me is why it consistently happens for the About me / Portfolio.

The code as you say has some loops - the first of it is checking the scroll top relative to a previously populated array of scroll offsets for the various div's linked to the menu.

The index (i) is set based on the match found in the scrolling (m) array. For some reason this is coming out at 3 for both About and Portfolio - but not the rest.

As the m array is auto-calculated by taking the scroll offset of the respective div - it is interesting that this behaviour is consistently observed for the two elements in question.

My next step was to change the order of the menu around and see if that made a difference - by order I mean the page numbering to see if it had something to do with the div itself or its position in the lineup.

Here is another interesting thing. The functionality works as expected when you are scrolling - using the scroll bar. It seems to fall over when you click the menu.

One solution might be to force a call to the on scroll function on completion of the animate call from a menu click.

Might be one of those unsolved mysteries though if the author has solved the problem.

The difference between scrolling the page manually and animating the scroll is the difference between scrollTop() (used in the scroll event handler) and offset().top (used in the goToByScroll() function).

The array of offsetTop values looks like this:

index: 0, page id: page1, this.offsetTop: 0
index: 1, page id: page2, this.offsetTop: 843
index: 2, page id: page3, this.offsetTop: 1670
index: 3, page id: page4, this.offsetTop: 3643
index: 4, page id: page5, this.offsetTop: 4962

The scrollTop values from the scroll event handler look like this:

win.scrollTop: 0
win.scrollTop: 843
win.scrollTop: 1651
win.scrollTop: 3624
win.scrollTop: 4965

It's clear from this why it works for pages 1 and 2 but not for 3. The difference is as much as 22 pixels between scrollTop() and offset().top.

If you add 22 pixels to the offset().Top in the goToByScroll() function, it works properly.

$('html,body').animate({scrollTop: $("#"+id).offset().top + 22},'slow');