jquery实现div层随页面滚动而滚动(固定在某一位置)
2014-11-11 00:00
483 查看
翻看ipc.me时觉得右侧的slider会随着页面下翻而始终浮动在窗口边沿下,体验很不错,在张鑫旭的博客中一篇文章的借鉴下,成功实现这样一个功能,代码如下(基于jquery实现,所以事先要在页面中导入jquery文件):
跟原作者说的一样,我也是妥妥的实现了这一功能,当然是在chrome下,IE没有测试,应该也是可以的,实现的原理如下(最好是看一下,了解原理,就站在了制高点看问题,一览众山小):
默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。
现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库jQuery帮我们解决了这些工作。
<script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: "absolute", top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; $("要浮动的层id或class").smartFloat(); </script>
跟原作者说的一样,我也是妥妥的实现了这一功能,当然是在chrome下,IE没有测试,应该也是可以的,实现的原理如下(最好是看一下,了解原理,就站在了制高点看问题,一览众山小):
默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。
现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库jQuery帮我们解决了这些工作。
相关文章推荐
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- js,jquery滚动/跳转页面到指定位置的实现思路
- Jquery定位插件,固定元素在页面某个位置,不随滚动条滚动
- js,jquery滚动/跳转页面到指定位置的实现思路
- jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
- jquery滚动/跳转页面到指定位置的实现思路
- JQuery实现页面刷新滚动条自动滚动到特定位置
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- jquery实现页面滑动到固定位置显示某个div
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
- 第一屏层固定位置,滚动页面层固定在源位置
- 通过jQuery来实现页脚永远固定在页面底部的效果
- [转]如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
- 【转】JQuery实现页面随滚动条滚动而动态加载内容的效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- 利用CSS实现DIV在浏览器中位置相对固定,而且IE6下滚动不闪
- jQuery页面滚动图片等元素动态加载实现