By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,945 Members | 1,703 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,945 IT Pros & Developers. It's quick & easy.

Stopping floating menu at base of page

P: 9
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.com

I've also attached a screen shot to try and help illustrate what i'm trying to do. Any suggestions?
Attached Images
File Type: jpg stop.jpg (81.9 KB, 180 views)
Aug 2 '11 #1
Share this Question
Share on Google+
3 Replies


Rabbit
Expert Mod 10K+
P: 12,430
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.
http://help.dottoro.com/ljurkcpe.php
Aug 2 '11 #2

P: 9
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?
Aug 2 '11 #3

Rabbit
Expert Mod 10K+
P: 12,430
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.
Aug 3 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.