naggingmenu——顶部菜单栏定位

nagging-menu是一个jQuery插件,它允许您创建一个浮动和固定的位置在你的网页顶部菜单栏。浮动菜单栏是无形的,直到你向下滚动,然后似乎。如果你在寻找一个简单的固定顶部菜单栏不使用jQuery,请看看我们的另一篇文章粘性和CSS3顶部菜单栏.

1。标记
Home
CSS
Design
Development
Freebies
Inspiration
Resources
Tutorials
WordPress
2。菜单Css
/* Menu */
 
#menu {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1));
background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 50px;
text-align: center;
margin: 0 auto;
padding: 0;
}
 
/* Default Style */
 
.default {
width: 850px;
height: 50px;
box-shadow: 0 5px 20px #888;
-webkit-box-shadow: 0 5px 20px #888;
-moz-box-shadow: 0 5px 20px #888;
}
 
 
/* CSS3 position: fixed */
.fixed {
position: fixed;
top: -5px;
left: 0;
width: 100%;
box-shadow: 0 0 40px #222;
-webkit-box-shadow: 0 0 40px #222;
-moz-box-shadow: 0 0 40px #222;
}
3。包括jQuery库
4。JavaScript
$(function(){
     
    var menu = $('#menu'),
        pos = menu.offset();
         
        $(window).scroll(function(){
            if($(this).scrollTop() >pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });
 
});