快捷導(dǎo)航

jquery簡單實(shí)現(xiàn)滾動(dòng)條下拉DIV固定在頭部不動(dòng)

更新時(shí)間：2013年11月25日 17:05:49 作者：

滾動(dòng)條下拉DIV固定在頭部不動(dòng)效果，想必很多的朋友都有見到過吧，下面為大家詳細(xì)介紹下使用jquery是如何實(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>滾動(dòng)條下拉DIV固定在頭部不動(dòng)</title> 
<script type="text/javascript" src="http://img.fishburg.net/ks/js/jquery-1.8.js"></script> 
<style> 
*{padding:0;margin:0;} 
.ab{ width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px;} 
.bc{ width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; background-color:#060;} 
.pf{ width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff;} 

/*---------------------漂浮導(dǎo)航---------------------------*/ 
html{ _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖動(dòng) **/} 
.float{ position:fixed; z-index:999999; top:0px;} 
* html .float{ position:absolute; _top:expression(documentElement.scrollTop-0);} 
</style> 

</head> 

<body> 
<div class="ab">第一版塊</div> 
<div class="pf">漂浮內(nèi)容</div> 
<script type="text/javascript"> 
window.onscroll=function(){ 
if ($(document).scrollTop() > 250) 
{ 
//$("#pf_nav").show(); 
$(".pf").addClass('float'); 
}else{ 
//$("#pf_nav").hide(); 
$(".pf").removeClass('float'); 
} 
} 
</script> 
<div class="bc"> 
<p> 
<script language="javascript"> 
for(i=0;i<50;i++){ 
document.write(i+"<br />"); 
} 
</script> 
</p> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

Jquery和CSS實(shí)現(xiàn)選擇框重置按鈕功能
在本篇文章中我們給大家?guī)砹薐query和CSS實(shí)現(xiàn)選擇框重置按鈕功能的相關(guān)代碼，需要的朋友們參考下。
2018-11-11
jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)上下左右滑動(dòng)的方法,是jQuery特效中非常典型的應(yīng)用,需要的朋友可以參考下
2015-02-02
jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件
這篇文章主要為大家詳細(xì)介紹了jQuery插件ajaxfileupload.js實(shí)現(xiàn)上傳文件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...
2007-06-06
jquery 使用點(diǎn)滴函數(shù)代碼
簡單的按鈕js事件用于判斷和顯示提示
2011-05-05
百度多文件異步上傳控件webuploader基本用法解析
這篇文章主要為大家詳細(xì)介紹了百度多文件異步上傳控件webuploader基本用法解析
2016-11-11
牛叉的Jquery——Jquery與DOM對(duì)象的互相轉(zhuǎn)換及DOM的三種操作
Jquery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下
2015-10-10
JQUERY的AJAX請(qǐng)求緩存里的數(shù)據(jù)問題處理
這篇文章主要介紹了JQUERY的AJAX請(qǐng)求緩存里的數(shù)據(jù)問題處理的相關(guān)資料,需要的朋友可以參考下
2016-02-02
jquery判斷字符輸入個(gè)數(shù)（數(shù)字英文長度記為1，中文記為2，超過長度自動(dòng)截?。?
2010-10-10