jQuery仿gmail實(shí)現(xiàn)fixed布局的方法
更新時(shí)間：2015年05月27日 16:56:19 作者：不吃皮蛋
這篇文章主要介紹了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法,涉及jQuery操作頁面元素屬性的相關(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>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
使用jquery mobile做幻燈播放效果實(shí)現(xiàn)步驟
使用jquery mobile，可以很容易實(shí)現(xiàn)幻燈播放效果，擺脫繁雜的步驟輕松實(shí)現(xiàn)，接下來介紹，有需要的朋友可以參考下2013-01-01
jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制3D帕累托圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這個(gè)是最早做出來的, 現(xiàn)在也改成xml格式了, 呵呵.2009-11-11
jQuery實(shí)現(xiàn)打開頁面漸現(xiàn)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)打開頁面漸現(xiàn)效果的方法,結(jié)合實(shí)例形式分析了jQuery樣式操作及頁面元素的漸變效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07
本章節(jié)介紹一下在谷歌瀏覽器下利用jquery無法獲取圖片尺寸的現(xiàn)象，而在IE和火狐瀏覽器下能夠正常獲得，當(dāng)然也不是任何時(shí)候都無法獲取圖片尺寸，下面給大家介紹遇到此問題該如何解決2015-09-09
jquery表單驗(yàn)證需要做些什么，大家知道嗎？其實(shí)很簡單只要做四件事情就可以順利完成表單驗(yàn)證，想知道哪四件事情嗎，請仔細(xì)閱讀下文。2015-11-11
jQuery中ajax的load()與post()方法實(shí)例詳解
這篇文章主要介紹了jQuery中ajax的load()與post()方法,結(jié)合實(shí)例詳細(xì)分析了jQuery中l(wèi)oad()與post()方法實(shí)現(xiàn)ajax交互的相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2016-01-01
基于jQuery Circlr插件實(shí)現(xiàn)產(chǎn)品圖片360度旋轉(zhuǎn)
Circlr是一款可以對產(chǎn)品圖片進(jìn)行360度全方位旋轉(zhuǎn)展示的jQuery插件，本文給大家分享一款基于jQuery Circlr插件實(shí)現(xiàn)產(chǎn)品圖片360度旋轉(zhuǎn)，大家一起來看看吧2015-09-09
這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下2017-09-09
jQueryUI Sortable 應(yīng)用Demo(分享)
下面小編就為大家?guī)硪黄猨QueryUI Sortable 應(yīng)用Demo(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09