jQuery实现浮动层随浏览器滚动条滚动的方法


Posted in Javascript onSeptember 22, 2015

本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:

这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想。

运行效果截图如下:

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>jquery浮动层随浏览器滚动条滚动</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
if ($.browser.version != "6.0") {
 $(window).scroll(function(){
  if($(this).scrollTop()>118 &&(($(document).height()-$(this).scrollTop())>($(window).height()+$(".aysw-footer").innerHeight()))){
   $("#c_left").css({position: 'fixed', top: '2px'});
  }else{
   if(($(document).height()-$(this).scrollTop())<=($(window).height()+$(".aysw-footer").innerHeight())){
    $("#c_left").css({position: 'absolute', top:($(".aysw-footer").offset().top-$("#c_left").innerHeight()-$(".page-home").offset().top-20) +'px'});
   }else{
    $("#c_left").css({position: 'absolute', top: '2px'});
   }
  }
 });
}
</script>
</head>
<body style="height:auto; margin:0; padding:0">
<div style="height:118px;background:#6CF;">sadfsadfasfsafd</div>
<div class="page-home" style="min-height:1500px;width:100%; background-color:#FFC; position:relative">
 <div id="c_left" style="border:1px solid red; width:200px ;height:800px; color:white;background-color:#333; position:absolute; top:2px">
 羞涩的浮动层...
 </div>
</div>
<div class="aysw-footer" style="height:200px; width:100%; background-color:#0C3; position:relative"></div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
网页自动跳转代码收集
Sep 27 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
详解js前端代码异常监控
Jan 11 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
You might like
PHP array 的加法操作代码
2010/07/24 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
js实现登录与注册界面
2017/11/01 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python OS模块实例详解
2019/04/15 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
康拓普公司Java笔面试
2016/09/23 面试题
大学生创业策划书
2014/02/02 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
党支部审查意见
2015/06/02 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS