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 相关文章推荐
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 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
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
php简单获取复选框值的方法
2016/05/11 PHP
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
JS作用域链详解
2017/06/26 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
技术总监的工作职责
2013/11/13 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
西安兵马俑导游词
2015/02/02 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书