Stopping floating menu at base of page

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Jake Carter
    New Member
    • Feb 2011
    • 9

    Stopping floating menu at base of page

    Hi Everyone,
    I have implemented a floating menu that scrolls with the page. I am looking for help trying to "stop" the scrolling when it reaches the end of the content. Currently, if you scroll to the bottom of the page it overlaps onto the footer. Here is the site: www.getmyrank.c om

    I've also attached a screen shot to try and help illustrate what i'm trying to do. Any suggestions?
    Attached Files
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    You'll have to use the scroll event to figure out how far down they are on the page. When they get to a position where the menu will overlap the footer, change the positioning from fixed to absolute and position it at the bottom. When they scroll up enough, reverse the changes.

    Here's a reference on the scroll event and how to find out how far they've scrolled.

    Comment

    • Jake Carter
      New Member
      • Feb 2011
      • 9

      #3
      Thanks for the reference. Might be outside of my abilities im worried :/

      is there a way to do it with CSS and creating a new DIV?

      Comment

      • Rabbit
        Recognized Expert MVP
        • Jan 2007
        • 12517

        #4
        I don't think it's possible with just css. Maybe if the main content is in an iframe it might be possible. But there are issues with iframes as well.

        If you want to give the javascript a shot, you can post any problems you run into and we can help you work through them.

        Comment

        Working...