浮动导航jquery代码

最近发现自己的浮动导航有些不怎么漂亮,经过一番考虑采用jquery的浮动动画导航比较中意,

说干就做

首先,导航条的css样式

.menu-menu-container {

background: url(‘images/nav-bg.png’) no-repeat 0;

overflow: hidden;

position: absolute;

top: 250px;

left: 50%;

padding-left: 10px;

margin-left: -515px;

width: 1030px;

height: 76px;

z-index: 999;

}

其次是导航条的动画效果jquery代码首先简单的动画效果

//浮动导航代码
$(function() {
var $sidebar = $(“.menu-menu-container”), //menu-menu-container为导航div的class名称
$window = $(window),
offset = $sidebar.offset(),
topPadding = 0;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {  //判断导航条位置
$sidebar.stop().animate({  //jquery动画
marginTop: $window.scrollTop() – offset.top + topPadding  //设置导航浮动位置
});

} else {
$sidebar.stop().animate({  //jquery动画
marginTop: 0 //设置导航浮动位置
});
}
});

});

最后可以用css3的渐变与阴影效果,可惜就是ie不支持css3效果,等以后大部分浏览器都支持css3就不用背景图片了!

 » 转载请注明来源:网络蛀虫小窝 » 《浮动导航jquery代码》
 » 本站地址:http://www.gomoth.com

标签: , ,