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工具 Cookie 封装
Aug 21 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
js实现网页抽奖实例
Aug 05 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
JavaScript实现单点登录的示例
Sep 23 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
Node与Python 双向通信的实现代码
Jul 16 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.MVC的模板标签系统(二)
2006/09/05 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
js 字符串操作函数
2009/07/25 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python unittest模块用法实例分析
2018/05/25 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
自我鉴定注意事项
2014/01/19 职场文书
初三化学教学反思
2014/01/23 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
踏青活动策划方案
2014/08/19 职场文书
公证委托书标准格式
2014/09/11 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
Python 制作自动化翻译工具
2021/04/25 Python