ZofXare Technologies

Demos

This page shows examples of features that can be added to a web page to make it a little more interactive and interesting. This page is also a test bed for features where I wanted to learn "how do they do that".

ArrowFixed Menu When Scrolling

As the page is scrolled down, the menu becomes fixed at the top, so it is always visible. I really like this effect on sites. It's always a pain to get to the bottom of a long page and then have to scroll all the way back up to the top to get to another page.
This demo uses HTML, CSS and jQuery to create the effect. It's a pretty simple function that does all of the work. The function gets the top position of the menu element. Whenever the window scrolls, the current position is checked against the top position of the menu element. If the current position is greater than the top position of the menu element, the menu element gets a css class added to it to keep it from moving out of view.
This demo also keeps the left position updated because the menu is centered using left and right values of auto.

Other fixed menu when scrolling examples:
http://jqueryfordesigners.com/fixed-floating-elements/
http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/
http://www.sutanaryan.com/jquery/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/

BTW, the menu on this site is always fixed. It never moves. It only uses css's 'position:fixed' value.

SEE THE FIXED MENU WHEN SCROLLING DEMO





All demos are free to use. If you can, please give me credit. Donations are also greatly appreciated.