naggingmenu——顶部菜单栏定位

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

在线演示        积分下载        6毛下载        砍两刀下载