jQuery實(shí)現(xiàn)網(wǎng)頁(yè)頂部固定導(dǎo)航效果代碼
更新時(shí)間：2015年12月24日 11:42:08 作者：cui_angel
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁(yè)頂部固定導(dǎo)航效果代碼,涉及jQuery響應(yīng)scroll事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)網(wǎng)頁(yè)頂部固定導(dǎo)航效果代碼。分享給大家供大家參考，具體如下：
運(yùn)行效果截圖如下：
具體代碼如下：
<!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>無(wú)標(biāo)題文檔</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>首頁(yè)</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>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
- 使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery實(shí)現(xiàn)的導(dǎo)航固定效果
- jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
- jQuery導(dǎo)航條固定定位效果實(shí)例代碼
相關(guān)文章
鋒利的jQuery 要點(diǎn)歸納（二）上 jQuery中的DOM操作，需要的朋友可以參考下。2010-03-03
jquery Tab 選項(xiàng)卡通用函數(shù)
用類作為選擇符雖然效率低點(diǎn)但是 可以多次重用 這個(gè)性質(zhì)不錯(cuò)2010-04-04
jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果,可實(shí)現(xiàn)圖片組集體轉(zhuǎn)動(dòng)的功能,通過(guò)jQuery結(jié)合時(shí)間函數(shù)定時(shí)操作css3屬性實(shí)現(xiàn)旋轉(zhuǎn)效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01
jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
ajax無(wú)刷新動(dòng)態(tài)調(diào)用股票信息(改良版)
今日閑來(lái)無(wú)事，把上次寫的代碼稍微改了改。增加了動(dòng)態(tài)追加和刪除股票信息的功能（代碼基于jquery運(yùn)行：http://jquery.com/） 。由于對(duì)Ajax技術(shù)的認(rèn)識(shí)還只是在初級(jí)階段，總覺(jué)得這么些有點(diǎn)別扭，希望大蝦能夠指點(diǎn)一二。2008-11-11
jQuery中$.ajax()和$.getJson()同步處理詳解
這篇文章主要介紹了jQuery中$.ajax()和$.getJson()同步處理詳解的相關(guān)資料，非常的細(xì)致全面，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jquery圖片輪播插件，仿支付寶2013版全屏圖片幻燈片功能,需要的朋友可以參考下2014-04-04
Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后，刷新第一個(gè)DataGrid框體，下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集2014-01-01
jQuery動(dòng)畫_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
用JavaScript手動(dòng)實(shí)現(xiàn)動(dòng)畫效果，需要編寫非常復(fù)雜的代碼。下面給分享jQuery內(nèi)置的幾種動(dòng)畫樣式，需要的朋友參考下吧2017-07-07
下面小編就為大家?guī)?lái)一篇jQuery ajax讀取本地json文件的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10