jQuery仿gmail實(shí)現(xiàn)fixed布局的方法
更新時(shí)間：2015年05月27日 16:56:19 作者：不吃皮蛋
這篇文章主要介紹了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法,涉及jQuery操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法。分享給大家供大家參考。具體實(shí)現(xià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>fixed bar demo</title>
<style type="text/css" media="screen">
body{
margin:0;
height:2000px;
}
#top{
background-color:#333;
height:80px;
}
#nav{
background-color:#999;
height:30px;
position:absolute;
top:80px;
width:100%;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < 80)
$("#nav").css('top', '80px');
else
$("#nav").css('top', scrollTop +'px');
});
});
</script>
</head>
<body>
<div id="top">
</div>
<div id="nav">
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
JQuery Ajax如何實(shí)現(xiàn)注冊(cè)檢測(cè)用戶名
這篇文章主要介紹了JQuery Ajax如何實(shí)現(xiàn)注冊(cè)檢測(cè)用戶名,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
有時(shí)候我們?cè)谇岸碎_(kāi)發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應(yīng)的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見(jiàn)的jquery判斷圖片加載完成時(shí)的方法2015-08-08
jquery實(shí)現(xiàn)彈窗功能（窗口居中顯示）
本文主要介紹了jquery實(shí)現(xiàn)彈窗功能且彈出確認(rèn)框始終位于窗口中間位置的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效
本文主要分享了原生JS實(shí)現(xiàn)在線問(wèn)卷調(diào)查投票特效的實(shí)例代碼?？芍苯訌?fù)制保存HTML運(yùn)行查看效果。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
本文為大家揭秘如何使表單更加美化，感興趣的小伙伴們可以參考一下2015-10-10
jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D雙柱狀圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件繪制2D雙柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-05-05
jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫(huà)效果無(wú)刷新柱狀圖投票代碼,通過(guò)使用jquery動(dòng)態(tài)操作頁(yè)面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
基于jQuery實(shí)現(xiàn)表格的查看修改刪除
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)表格的查看修改刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
使用jQuery刪除事件（或稱解除事件綁定）有三個(gè)函數(shù)：unbind、die和undelegate。這三個(gè)方法都依賴于未公開(kāi)的jQuery.event.remove（后續(xù)使用.remove簡(jiǎn)寫(xiě)）。此為刪除事件的核心方法。2011-07-07