jquery简单实现滚动条下拉DIV固定在头部不动
更新时间：2013年11月25日 17:05:49 作者：
滚动条下拉DIV固定在头部不动效果，想必很多的朋友都有见到过吧，下面为大家详细介绍下使用jquery是如何实现的，感兴趣的朋友可以参考下
复制代码 代码如下:
<!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和CSS实现选择框重置按钮功能的相关代码，需要的朋友们参考下。2018-11-11
这篇文章主要介绍了jquery实现上下左右滑动的方法,是jQuery特效中非常典型的应用,需要的朋友可以参考下2015-02-02
jQuery插件ajaxfileupload.js实现上传文件
这篇文章主要为大家详细介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
jQuery基础学习技巧总结...2007-06-06
简单的按钮js事件 用于判断和显示提示2011-05-05
这篇文章主要为大家详细介绍了百度多文件异步上传控件webuploader基本用法解析2016-11-11
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法，本文给大家介绍Jquery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。感兴趣的朋友可以参考下2015-10-10
这篇文章主要介绍了JQUERY的AJAX请求缓存里的数据问题处理的相关资料,需要的朋友可以参考下2016-02-02
jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）
jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）2010-10-10
这篇文章主要介绍了个人手机的常用的jQuery前端技巧,需要的朋友可以参考下2014-12-12
最新评论