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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
纯js简单日历实现代码
Oct 05 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
多种方式实现js图片预览
Dec 12 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
详解angularjs利用ui-route异步加载组件
May 21 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
总结Python编程中三条常用的技巧
2015/05/11 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
中科软笔试题和面试题
2014/10/07 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
财务会计实习报告体会
2013/12/20 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
超市创业计划书
2014/04/24 职场文书
教师评语大全
2014/04/28 职场文书
党员自我剖析材料
2014/08/31 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
python 命令行传参方法总结
2021/05/25 Python
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers