New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Floating Top Bar script

Author: Dynamic Drive

Note: Updated Oct 3rd 05' for option to float from bottom of window

Description: This script displays a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled. Regular HTML content can be shown inside of it. And to make the bar less intrusive, once it is closed (by clicking on the "x"), the bar can be set to dismiss for the entire duration of the browser session, by using cookies. Reloading the page won't bring it back. Sites like About.com use something similar to display important tidbits of information.

Demo:


Directions: Developer's View

Step 1: Add the following code into the <HEAD> section of your page:

Select All

Step 2: Insert the below HTML code in the BODY section of your page, outside any container tags (ie: a DIV or TABLE):

Select All

Step 3: Finally, this script uses an image to close the bar:

(right click, and select "Save As").

Your content here.