SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    animated page scroll and selected link

    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.
    Failure happens, its what you learn from it that is important!

  2. #2
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  4. #4
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:
    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.

  5. #5
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!

  6. #6
    SitePoint Evangelist OwainGDWilliams's Avatar
    Join Date
    Aug 2005
    Location
    Scotland, UK
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Failure happens, its what you learn from it that is important!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •