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


Posted in Javascript onNovember 25, 2013
<!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>
Javascript 相关文章推荐
网页打开自动最大化的js代码
Aug 22 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
jquery form 加载数据示例
Apr 21 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
Ionic快速安装教程
Jun 03 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 #Javascript
ie与ff下的event事件使用介绍
Nov 25 #Javascript
javascript利用apply和arguments复用方法
Nov 25 #Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 #Javascript
js给onclick赋值传参数的两种方法
Nov 25 #Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 #Javascript
写JQuery插件的基本知识
Nov 25 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
三年级语文教学反思
2014/02/01 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2016年会领导致辞稿
2015/07/29 职场文书