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 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
js验证上传图片的方法
May 12 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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
laravel添加前台跳转成功页面示例
2019/10/22 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Angular2整合其他插件的方法
2018/01/20 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python如何让类支持比较运算
2018/03/20 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
大学生先进事迹材料
2014/02/16 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
任命书格式
2014/06/05 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript