JQuery 浮動導航欄

/* 浮動導航欄 Begin */

#floatMenu

{

padding-top: 5px;

background: url(http://img.jb51.net/images/quickmenu.gif) no-repeat;

border: 1px solid #dcdcdc;

position: absolute;

top: 250px;

left: 5px;

margin-left: 0px;

width: 86px;

}

#floatMenu ul

{

margin-left: 0px;

background-color:White;

list-style-type: none;

padding:10px

}

#floatMenu ul li a

{

display: block;

text-decoration: none;

color: #000;

}

#floatMenu ul li a:hover

{

color: #fff;

background-color: #ff8000;

}

#floatMenu ul.menu1 li a:hover

{

border-color: #09f;

}

/* 浮動導航欄 End */

• Home
• About Us
• Product
• Contact

/>

/>

/>

//

var name = "#floatMenu";

var menuYloc = null;

$(document).ready(function() {

menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px")))

$(window).scroll(function() {

offset = menuYloc + $(document).scrollTop() + "px";

$(name).animate({ top: offset }, { duration: 500, queue: false });

});

});

//]]>

總結

以上是生活随笔為你收集整理的浮动导航栏php源码,JQuery 浮动导航栏实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。