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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
javascript中Function类型详解
Apr 28 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
咖啡的种类和口感
2021/03/03 新手入门
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
Python实现批量压缩图片
2018/01/25 Python
python表格存取的方法
2018/03/07 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
在django view中给form传入参数的例子
2019/07/19 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
先进工作者个人总结
2015/02/15 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis