jQuery實現網頁頂部固定導航效果代碼
更新時間：2015年12月24日 11:42:08 作者：cui_angel
這篇文章主要介紹了jQuery實現網頁頂部固定導航效果代碼,涉及jQuery響應scroll事件動態(tài)操作頁面元素樣式的相關技巧,需要的朋友可以參考下
本文實例講述了jQuery實現網頁頂部固定導航效果代碼。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#wrap ul li ").css("width",760 / $("#wrap ul li").size());
$(window).scroll(function(){
var h = $(this).scrollTop()+2;
$("#wrap").css("top",h);
});
$("#wrap ul li:even").css("background","#ddd")
$("#wrap ul li").hover(function(){$(this).css("background","#0f0");},function(){$(this).css("background","");});
});
</script>
<style type="text/css">
#wrap{position:absolute; top:2px; left:0px; width:100%; height:20px; background:#f00;}
#wrap ul{list-style:none; width:760px; margin:0 auto; padding:0; background:#fff;}
#wrap ul li{float: left; text-align:center;}
#test{height:2000px; background:#f0f; margin:0; padding:0; border:1px solid black;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<Li>首頁</Li>
<li>圖片</li>
<li>新聞</li>
<li>軟件</li>
<li>圖片</li>
<li>新聞</li>
<li>軟件</li>
<li>圖片</li>
<li>新聞</li>
<li>軟件</li>
</ul>
</div><div id="test"></div>
</body>
</html>
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
鋒利的jQuery 要點歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。2010-03-03
用類作為選擇符雖然效率低點但是 可以多次重用 這個性質不錯2010-04-04
jQuery+css3實現轉動的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實現轉動的正方形效果,可實現圖片組集體轉動的功能,通過jQuery結合時間函數定時操作css3屬性實現旋轉效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01
本篇文章主要是對jquery ajax,ashx,json的用法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運行：http://jquery.com/） 。由于對Ajax技術的認識還只是在初級階段，總覺得這么些有點別扭，希望大蝦能夠指點一二。2008-11-11
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關資料，非常的細致全面，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jquery圖片輪播插件，仿支付寶2013版全屏圖片幻燈片功能,需要的朋友可以參考下2014-04-04
Jquery下EasyUI組件中的DataGrid結果集清空方法
要求選擇“地區(qū)”及“代維公司”后，刷新第一個DataGrid框體，下面為大家介紹下如何清空Jquery下EasyUI組件中的DataGrid結果集2014-01-01
jQuery動畫_動力節(jié)點節(jié)點Java學院整理
用JavaScript手動實現動畫效果，需要編寫非常復雜的代碼。下面給分享jQuery內置的幾種動畫樣式，需要的朋友參考下吧2017-07-07
下面小編就為大家?guī)硪黄猨Query ajax讀取本地json文件的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10