设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > 建站程序教程:可跟随页面滚动的浮动层效果
建站程序教程:可跟随页面滚动的浮动层效果
发布时间: 2014-08-15
关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下:
随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,类似的效果在新浪微博上也有,当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,此效果实现原理其实很简单,本文就将展示其实现。

实现原理
默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok。关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixed属性,所以,后退一步,使用absolute属性代替,但是会有副作用——滚动不平滑。但,这也是没有办法的事情了。

现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢?当浮动层与浏览器窗口上边缘接触的一瞬间,其页面垂直偏移值与页面的滚动高度其实是一致的,所以,用这个进行判断就OK了,但是,如何获得页面上元素距离页面的垂直距离呢?纯粹的js代码获得此值还是比较麻烦的,好在JavaScript库帮我们解决了这些工作,所以,我们的工作其实就很平坦,下面就将展示如何在jQuery库下实现该效果。


使用 jQuery Scroll Follow 。
必须调用的js有:
1. jQuery Easing Plugin
2. jQuery Cookie Plugin
3. jQuery Scroll Follow

1. 包含以上三个必须得js脚本文件到你的项目:
以下为引用的内容:
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="ui.core.js"></script><script type="text/javascript" src="jquery.scrollFollow.js"></script>
2. 绑定Scroll Following方法到希望实现该效果的DOM对象:
以下为引用的内容:
<script type="text/javascript"> $( '#example' ).scrollFollow(); </script>

3. 还可以为绑定DOM对象的Scroll Following设置参数:
以下为引用的内容:
<script type="text/javascript">  $( document ).ready( function () {    $( '#example' ).scrollFollow( {     speed: 1000,     offset: 60,     killSwitch: 'exampleLink',     onText: 'Disable Follow',     offText: 'Enable Follow'    } );  } );</script>

4. 或者为绑定的DOM对象指定一个上级(父)元素(通过调用父元素ID),为该绑定对象设置一个外部容器,使得效果只能在该限定容器范围内有效:
以下为引用的内容:
<script type="text/javascript">  $( document ).ready( function () {   $( '#example' ).scrollFollow( {    container: 'outer'   } );  } );</script>



文章来源:森动网小鱼儿,转载请注明出处!