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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
几种响应式文字详解
May 19 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 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技术开发技巧分享
2010/03/23 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Javascript开发包大全整理
2006/12/22 Javascript
js使用递归解析xml
2014/12/12 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
node文件上传功能简易实现代码
2017/06/16 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python flask实现分页的示例代码
2018/08/02 Python
浅析Python四种数据类型
2018/09/26 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
使用python去除图片白色像素的实例
2019/12/12 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
新闻记者实习自我鉴定
2013/09/19 职场文书
小学开学寄语
2014/01/19 职场文书
总账会计岗位职责
2014/03/13 职场文书
2014年车间工作总结
2014/11/21 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript