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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
JavaScript中的类型检查
Feb 03 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
漂亮但不安全的CTB
2006/10/09 PHP
一个程序下载的管理程序(二)
2006/10/09 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
Python工厂函数用法实例分析
2018/05/14 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
事业单位个人应聘自荐信
2013/09/21 职场文书
团队精神演讲稿
2013/12/31 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
工伤赔偿协议书
2014/04/15 职场文书
党建工作经验交流材料
2014/05/25 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2014年统计工作总结
2014/11/21 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
员工担保书范本
2015/09/22 职场文书
Python数组变形的几种实现方法
2022/05/30 Python