jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果

更新時(shí)間：2015年08月07日 15:21:10 作者：皮蛋

這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對(duì)頁(yè)面高度計(jì)算與樣式的動(dòng)態(tài)添加及刪除技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果。分享給大家供大家參考。具體如下：

這里使用jquery實(shí)現(xiàn)網(wǎng)頁(yè)上的頭部固定，但不隨滾動(dòng)條滾動(dòng)的效果，在百度貼吧里整理出來(lái)的網(wǎng)頁(yè)特效，最開(kāi)始的時(shí)候，固定條可以隨滾動(dòng)條拖動(dòng)至網(wǎng)頁(yè)頂部，但到達(dá)網(wǎng)頁(yè)頂部后，再次拖動(dòng)滾動(dòng)條，頭部并不滾動(dòng)，其它的內(nèi)容可以滾動(dòng)，貌似在網(wǎng)上見(jiàn)的挺多的效果。

運(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>導(dǎo)航固定</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>導(dǎo)航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
這篇文章主要介紹了jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下
2014-05-05
jquery 判斷滾動(dòng)條到達(dá)了底部和頂端的方法
這篇文章主要介紹了jquery 判斷滾動(dòng)條到達(dá)了底部和到達(dá)頂端的方法,需要的朋友可以參考下
2014-04-04
基于jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音特效
jQuery.Hz2Py.js插件實(shí)現(xiàn)的漢字轉(zhuǎn)拼音是一款很實(shí)用的在線轉(zhuǎn)換功能，此插件已經(jīng)把漢字打包成一個(gè)插件庫(kù)，調(diào)用的時(shí)間很簡(jiǎn)單，只調(diào)用一個(gè)方法就可以實(shí)現(xiàn)轉(zhuǎn)換了
2015-05-05
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-08-08
JQuery常見(jiàn)節(jié)點(diǎn)操作實(shí)例分析
這篇文章主要介紹了JQuery常見(jiàn)節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)元素節(jié)點(diǎn)的添加、刪除常見(jiàn)操作函數(shù)使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2019-05-05
BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無(wú)效的原因及解決辦法(火狐下不能點(diǎn)擊)
今天同事讓我?guī)退黄鸾鉀Q一個(gè)問(wèn)題，關(guān)于兼容的bug問(wèn)題，在火狐中使用模態(tài)框加載日期控件時(shí)選擇時(shí)間下拉菜單沒(méi)有效果（不能點(diǎn)擊），而在谷歌中卻是好的，下面小編附上原因分析及解決辦法，有需要的朋友可以參考下
2016-08-08
JQuery對(duì)表單元素的基本操作使用總結(jié)
這篇文章主要介紹了JQuery對(duì)表單元素的基本操作使用總結(jié),需要的朋友可以參考下
2014-07-07
Bootstrap 時(shí)間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)
這篇文章主要介紹了Bootstrap 時(shí)間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
jquery中用函數(shù)來(lái)設(shè)置css樣式
本文主要對(duì)jquery中用函數(shù)來(lái)設(shè)置css樣式的方法進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，下面就跟小編一起來(lái)看下吧
2016-12-12
Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready
這篇文章主要介紹了Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下
2015-11-11