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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
整理的比较全的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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
快速了解Python中的装饰器
2018/01/11 Python
python配置grpc环境
2019/01/01 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
会计助理的岗位职责
2013/11/29 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
《小池塘》教学反思
2014/02/28 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
《秋思》教学反思
2016/02/23 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python