We are providing HierMenus to you at no cost. HierMenus code requires a confirmed membership with internet.com. Please register by clicking here and come back soon to download your free copy of HeirMenus code.
Click Here to Register

Site Navigation
Bulletins
About
Documentation
FAQ
Samples
Known Issues
Technology Jobs

internet.commerce

Partner With Us














          
internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

 
HierMenusCentral Enhance the Functionality of Your Web Site with DHTML HierMenus.
    

home / samples / fixed position, reposition on scroll

Fixed Position / Reposition On Scroll

Main Menu 1

HierMenus 6 offers two types of menus that you can take with you: Fixed Position menus, and Reposition On Scroll menus. Let's consider Reposition On Scroll menus first.

A Reposition On Scroll menu is exactly what it sounds like: each time you scroll the page (horizontally or vertically) the position of the menu is examined and adjusted if needed. If the menu's TopKeepInWindowX or TopKeepInWindowY parameters are still true (their defaults), or if the menu's TopMenuX and/or TopMenuY parameters are based on window coordinates, then the menu is "slid" gracefully into its new position. The visual effect is that the menu appears to follow the user around the page, wherever they scroll to.

To demonstrate this technique, we've intentionally made this page very wide, so that it would include a horizontal scroll bar (if it doesn't, just reduce the page until the horizontal scrollbar shows. You'll need a good 200px or so beyond the scroll bar to see the effect we're describing). Scroll the page to the right, and watch the menu above. Once it hits the side of the browser window, it will automatically begin following along, sliding into its new position each time the window is scrolled. When the scroll bar returns such that the menu can be shown entirely in its default position, it'll stop moving. To achieve this effect, we set the menu's default position to the position of an image we've added to the page in the above spot where we wanted the menu; then we set the menu's TopKeepInWindowY parameter to false (so the menu will not scroll with us when move the page vertically) and its RepositionOnScroll parameter to true.

A Fixed Position Menu is almost identical to a Reposition On Scroll menu. In fact, there is only one main difference in a fixed position menu: there is no "sliding" effect when the page is moved; rather, the menu remains "fixed" in the user's browser window no matter where or how they scroll. Fixed position menus are currently supported only in a limited number of browsers. If you set a menu to both fixed position (IsFixed is true) and RepositionOnScroll, HierMenus will apply fixed position menus in the browsers it can and set all others to Reposition On Scroll.

The menu in the bottom right corner of this page is an example of a Fixed Position Menu. Since fixed position menus do not automatically reposition themselves each time the page is scrolled (they don't need to; since they don't recognize the scrolling of the page anyways) they are best used for menus that will be based on window coordinates. We do not recommend using Fixed Position menus for menus that will be based on in-page elements or absolute positioning, as is the above example.

Our Menu Positioning Mini-Tutorial provides more details.

For further information, check out the reference entries for these configuration parameters:

RepositionOnScroll
IsFixed
RepositionInterval
ScrollPositionDelay
Menu Positioning Mini-Tutorial

Click the link below to have a look at the configuration file we used to generate these sample menus:

fixedscroll.js

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Created: 3/25/2004
Updated: 5/6/2004
URL: http://www.hiermenuscentral.com/samples/fixedscroll.html