jQuery实现页面滚动时层智能浮动定位
来源:互联网 发布:腾讯软件无法连接网络 编辑:程序博客网 时间:2024/05/19 04:29
一、应用展示
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:
随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示:
此效果实现原理其实很简单,本文就将展示其实现。
二、实现原理
默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。
现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库帮我们解决了这些工作,所以,我们的工作其实就很平坦,下面就将展示如何在jQuery库下实现该效果。
三、jQuery下的层的智能浮动
HTML代码:
JS代码:
就一小段绑定就实现了id为float的标签有了智能浮动功能,效果描述就是:当id为float的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动了。
打开demo页面,您会看到右侧自诩羞涩的浮动层了,滚动页面观察效果,下载地址:
http://download.csdn.net/detail/china_skag/7384589
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:
随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示:
此效果实现原理其实很简单,本文就将展示其实现。
二、实现原理
默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。
现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库帮我们解决了这些工作,所以,我们的工作其实就很平坦,下面就将展示如何在jQuery库下实现该效果。
三、jQuery下的层的智能浮动
HTML代码:
<div class=”float” id=”float”> 我是个腼腆羞涩的浮动层… </div>
JS代码:
var $smartFloat = function(elements) { var position = function(element) { var top = element.getPosition().y, pos = element.getStyle(“position”); window.addEvent(“scroll”, function() { var scrolls = this.getScroll().y; if (scrolls > top) { if (window.XMLHttpRequest) { element.setStyles({ position: “fixed”, top: 0 }); } else { element.setStyles({ top: scrolls }); } }else { element.setStyles({ position: “absolute”, top: top }); } }); }; if ($type(elements) === “array”) { return elements.each(function(items) { position(items); }); } else if ($type(elements) === “element”) { position(elements); }};//绑定$smartFloat($(“float”));
就一小段绑定就实现了id为float的标签有了智能浮动功能,效果描述就是:当id为float的元素在滚动的时候与浏览器上边缘接触时就不会再跟随滚动条滚动了。
打开demo页面,您会看到右侧自诩羞涩的浮动层了,滚动页面观察效果,下载地址:
http://download.csdn.net/detail/china_skag/7384589
0 0
- jQuery实现页面滚动时层智能浮动定位
- jQuery实现页面滚动时层智能浮动定位
- 页面滚动时层智能浮动定位,jQuery/MooTools实现
- jQuery实现页面滚动时层智能浮动定位
- js页面滚动浮动层智能定位(jQuery)实现
- JQuery页面滚动浮动层智能定位
- js页面滚动时层智能浮动定位实现
- js页面滚动时层智能浮动定位实现(jQuery/MooTools)
- js页面滚动浮动层智能定位(jQuery)实例页面
- js实现滚动时层智能浮动定位
- jQuery实现页面滚动时元素的智能定位
- jQuery实现浮动层跟随页面滚动效果
- jQuery浮动层跟随页面滚动
- JQuery实现的页面滚动时浮动窗口控件
- jQuery实现页面元素智能定位
- jquery浮动定位层导航描点上下滚动的浮动导航
- jQuery实现浮动层
- jQuery 实现拖动浮动层
- 李德毅院士:大数据挖掘带动的变迁
- Leetcode中一维数组与应用I
- VC++ MFC ListBox里面添加按钮等控件
- SSH(Secure SHell)使用
- Android入门第十五篇之ActivityGroup + GridView 实现Tab分页标签
- jQuery实现页面滚动时层智能浮动定位
- android中设置ListView的选中的Item的背景颜色
- VBOX硬盘动态扩展的时候,修改硬盘大小
- Android相关经验积累总结
- APK 变成 ZIP:Android 手机应用程序文件下载服务器需要注意的问题
- Linux的基本操作命令
- SSDT HOOK技术轻松让最新版冰刃、XueTr失效
- CentOS6.5安装MySql、Apache、PHP
- 字典树