jquery简单实现滚动条下拉DIV固定在头部不动

2019/6/29 22:40:51

编程Tag： 滚动条下拉 DIV固定

本文主要是介绍jquery简单实现滚动条下拉DIV固定在头部不动，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 
<!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>滚动条下拉DIV固定在头部不动</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;} 

/*---------------------漂浮导航---------------------------*/ 
html{ _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/} 
.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">漂浮内容</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> 

这篇关于jquery简单实现滚动条下拉DIV固定在头部不动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jquery简单实现滚动条下拉DIV固定在头部不动

相关编程文章