jQuery實現(xiàn)仿百度帖吧頭部固定導航效果
更新時間：2015年08月07日 15:21:10 作者：皮蛋
這篇文章主要介紹了jQuery實現(xiàn)仿百度帖吧頭部固定導航效果,涉及jquery針對頁面高度計算與樣式的動態(tài)添加及刪除技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)仿百度帖吧頭部固定導航效果。分享給大家供大家參考。具體如下：
這里使用jquery實現(xiàn)網(wǎng)頁上的頭部固定，但不隨滾動條滾動的效果，在百度貼吧里整理出來的網(wǎng)頁特效，最開始的時候，固定條可以隨滾動條拖動至網(wǎng)頁頂部，但到達網(wǎng)頁頂部后，再次拖動滾動條，頭部并不滾動，其它的內(nèi)容可以滾動，貌似在網(wǎng)上見的挺多的效果。
運行效果截圖如下：
具體代碼如下：
<!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 src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){
$(window).scroll(function() {
//$("body").css({"background-position":"center "+$(window).scrollTop()+""});
if($(window).scrollTop()>=250){
$(".nav").addClass("fixedNav");
}else{
$(".nav").removeClass("fixedNav");
}
});
});
</script>
<style>
*{
margin:0px;
padding:0px;
}
div.nav{
background:#000000;
height:57px;
line-height:57px;
color:#ffffff;
text-align:center;
font-family:"微軟雅黑", "黑體";
font-size:30px;
}
div.fixedNav{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:100000;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body>
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>導航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
jquery中的ajax方法怎樣通過JSONP進行遠程調(diào)用
這篇文章主要介紹了jquery中的ajax方法怎樣通過JSONP進行遠程調(diào)用,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jquery 判斷滾動條到達了底部和到達頂端的方法,需要的朋友可以參考下2014-04-04
基于jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實現(xiàn)的漢字轉(zhuǎn)拼音是一款很實用的在線轉(zhuǎn)換功能，此插件已經(jīng)把漢字打包成一個插件庫，調(diào)用的時間很簡單，只調(diào)用一個方法就可以實現(xiàn)轉(zhuǎn)換了2015-05-05
基于jquery實現(xiàn)的鼠標拖拽元素復(fù)制并寫入效果
基于jquery實現(xiàn)的鼠標拖拽元素復(fù)制并寫入效果的實現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
這篇文章主要介紹了JQuery常見節(jié)點操作,結(jié)合實例形式分析了jQuery針對元素節(jié)點的添加、刪除常見操作函數(shù)使用技巧與相關(guān)注意事項,需要的朋友可以參考下2019-05-05
BootStrap日期控件在模態(tài)框中選擇時間下拉菜單無效的原因及解決辦法(火狐下不能點擊)
今天同事讓我?guī)退黄鸾鉀Q一個問題，關(guān)于兼容的bug問題，在火狐中使用模態(tài)框加載日期控件時選擇時間下拉菜單沒有效果（不能點擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JQuery對表單元素的基本操作使用總結(jié),需要的朋友可以參考下2014-07-07
Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)
這篇文章主要介紹了Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
本文主要對jquery中用函數(shù)來設(shè)置css樣式的方法進行詳細介紹，具有很好的參考價值，下面就跟小編一起來看下吧2016-12-12
Jquery1.9.1源碼分析系列（六）延時對象應(yīng)用之jQuery.ready
這篇文章主要介紹了Jquery1.9.1源碼分析系列（六）延時對象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下2015-11-11