Scroll down this page, meanwhile check the blue menubar under the header!

Tired of 'sticky header' plugins that make that annoying 150 height header stay always on top? Here it's the solution: Sticky MenuBar. Just select what DOM object is your <ul> based menubar in, and the script will make it sticky on top of your screen whenever your visitors scroll your page. Once you scroll back up, it will stop at the right position.

The plugin also works as a Multi Level dropdown Mega Menu, and comes in 6 different CSS color templates for you to use.

Installation

Sticky MenuBar plugin consists of basically 5 files:

  • js/jquery-1.5.1.min.js
  • stickybar/jquery.stickymenu.js
  • stickybar/stickymenu.~color~.css
  • stickybar/arrow-right.png
  • stickybar/arrow-down.png

There are 6 available colors to choose. Blue, green, red, yellow, pink and dark. Of course you can make your own CSS templates, which is probably the best, for I'm not very good with CSS.

Once you have found these 5 files (the 2 .js files, one of the color .css files and the two images), the first thing you have to do is copy them within your web documents, inside a folder called sticky. Then include the js and css files between <head> and </head> tags inside your html document. This is how it should look like:

<link rel="stylesheet" type="text/css" href="stickybar/stickymenu.blue.css" />
<script type="text/javascript" src="stickybar/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="stickybar/jquery.stickymenu.js"></script>

Next thing to do is to decide where is your menubar (in case you are using your very own menubar). Usually menubars are simple <ul> in the header, but sometimes these menubars are included in their own <div>. To make it a little more visual, I will write some examples.

Example #1

<div class="header">
... header stuff here ...
</div>
<div class="menubar">
<ul class="menu_ul"> ... menubar stuff here ...</ul>
</div>

Example #2

<div class="header">
... header stuff here...
<ul class="menubar"> ... menubar stuff here ... </ul>
</div>

In either case, what you want to do is to turn '.menubar' as the floating object, but in the 1st example, the floating object is not the menu object. In the second example, floating object and menu object are the same <ul>. So, once again, between your <head> and </head> tags you need to include the script code:

<script language="javascript" type="text/javascript">
        $(document).ready(function() {

                /* For example #1 */
                $('.menu_ul').stickyMenubar({
                        floatingDiv: $('.menubar'),
                });

                /* For example #2 */
                $('.menubar').stickyMenubar({
                        floatingDiv: $('.menubar'),
                });

        });
</script>

Customization

The plugin accepts the following options.

floatingDiv: the DOM element to be used as the floating menu

floatingDivBackground: (true or false) sets if the background used on the actual menu, is going to be used on the floating element too

onScroll: (callback) function executed when the header is visible and the options menu sticks to it's original position

onLeaveTop: (callback) function executed when the header dissapears from the screen, and the menu becomes sticky to the top of the screen

These last 3 callback functions are very usefull for adding/deleting some margin-bottom from the header (in case all your content goes up when the options menu becomes "position:relative"). Also very usefull for showing or hiding options depending on the place of the page the visitor is watching (scroll up to the header to see the example on the actual menubar)

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:站长素材