animated page scroll and selected link

[OwainGDWilliams]

Basically what I am trying to do is this:
http://djpate.com/portfolio/scrollTop/

But have the menu on the left hand side which floats and when the screen scrolls down the navigation hits the top of the browser window and just stays there, unless I click on anchor 1 and then the screen scrolls back up and the navigation sits in its original position - inline with Anchor 1 heading.

e.g.

Home -> HEADING one
Link2
Link3
Link4


e.g.
Click on Link3 - page scrolls down to link3 heading

Home
Link2
Link3 -> Heading 3
Link4

Does anyone have any examples of how to do this, we have tried a number of options but can't get it to work with a top navigation bar.

Thanks,
Owain.

[OMGCarlos]

Demo: http://jsfiddle.net/hGRFu/5/

You almost had it You just needed to set the position of the menu to fixed (css=> position:fixed). I also removed the inline javascript from the links, as that typically a bad idea. It's better to make your links classes, and assign the class a function, instead of assigning individual links a function...imagine if you had to change it - you'd have to go back and update each individual links onClick event!!!

Your scollto function was good, but I subtracted the height of the menu from the destination, so that the menu wouldn't cover the actual header.

[edit]
Oh, you also need to push the content area (in this case, the body) down by the height of the menu to make it seem as if though the menu was taking up space.

[OwainGDWilliams]

hi,
Thanks for the example.

I've made some small changes to try and show what I am doing:
http://jsfiddle.net/wdR3r/

What I can't seem to get is how to get the menu to stroll down to number 3 and 4 and to stop in line with the heading. Anchor 1 is lined up but anchor 2 is slightly high when I click the link2. I also need to change the image background on link select. This will allow me to change the background to a pointer


One option I had looked at was the nav would start 150px down the page but then if you scroll up, it then sticks to the top of the window - this would then allow me to align the anchor with the link.

Thanks for your help with this,
O.

[OMGCarlos]

Something like this? http://jsfiddle.net/wdR3r/2/

Are you using IE by any chance? It aligns just fine on every other browser I have (I don't have IE).

This is the main part of the code:

    $(window).scroll(function(){
        if($(this).scrollTop() > $('#sideMenu').height()){
            $('#sideMenu').css({'position': 'fixed', 'top': 0});
            $('#content').css({'margin-top': '75px'});
        } else {
            $('#sideMenu').css({'position': 'relative', 'top': 0});
            $('#content').css({'margin-top': 0});
        }
    })

It checks to see if the window is below the height of the menu (you could change it to 150), and applies the necessary styles to "sticky" it or not.

[OwainGDWilliams]

Ye, using IE but need it to work in all browsers.

We are getting there, finding it hard to explain what I am exactly looking for - basically we have been given a design by the designers and we are trying to make it work!

Will try one more time to explain what we are trying to do.

Menu floats on the left hand side, approx 150px down the page, below our main navigation bar.

On the menu, there will be links to divs within the page - this is working in your example - on load, the first link is selected and the arrow background for this link is pointing to the H1 tag

e.g.

Home Link -----> Home H1 Tag

When the user clicks on the next link in the menu, the background changes and the arrow lines up with the H1 tag of the new section

e.g.

Home Link
Second Link ------> Second H1 Tag

which again, we sort of have working, but just now, it scrolls but doesnt put the 2nd dive to the top of the page - http://jsfiddle.net/BVVbg/
Anchor 2 seems to be stuck have way down and then if I click on Anchor 3 it also doesnt move.

Ideally, the menu would be seen at 150px (for example) on load, then if we scroll down the page, it slides up the screen until it hits the top of the browser.

Thanks for your continued help.

O.

[OwainGDWilliams]

Hi!
I have found the solution I am looking for on http://www.distractedbysquirrels.com...on-and-jquery/

Thanks for your help, hopefully with this demo we can get the result we are looking for!

O.