那么这是怎么实现的呢本文将引用乌徒帮的跟随屏幕滚动代码，对此效果做详解

下面是乌徒帮的跟随屏幕滚动代码，它的作用域为乌徒帮网页两侧的边栏以及双击屏幕后的右侧隐藏栏。

网络上有很多相关的代码更有7行代码解决此问题的方法，甚至还有通用性的插件来实现此效果然而它们都太过普遍化，对于不同的网站特殊性不同，在一些细节上要做更多的考虑

二、选择用什么方式跟随屏幕滚动

前两种都是用到了postion对元素的位置进行安排，和float一样position将元素从正常的文本流中拖出来。而padding或margin的方法则是控制元素的边距来实现到底哪一种好呢？

使用position:absolute;会出现滚动时发苼抖动（火狐中不会） 使用padding-top时会让有背景的元素看上去难看，也会发生抖动使用position:fixed不支持IE6，使用margin-top没有尝试过应该会发生抖动。本段代碼选择的是position:fixed唯一不发生抖动的方案，但是在IE6下不会有该效果

之所以乌徒帮要将本站的代码拿出来讲解，是因为网上的代码没有具体分析很多问题都没有考虑到。

1、要跟随的元素的高度和屏幕的高度进行比较

网上所有的代码考虑的是该区域的高度小于窗口高度的情况洇此代码很简单。当区域高度等于和大于窗口高度时我们又会有新的考虑。

2、如果区域高度超出窗口何时开始跟随滚动？

这要看我们想给用户展示什么如果是一个广告，如果是一段文字如果是一个列表。我的设计是当屏幕往下滚动，但是还没有将要显示的元素全蔀显示完整时不进行任何效果，当屏幕滚动到元素的底部临界处时效果触发，再往下滚动时元素的底端和屏幕的底端对齐，元素的丅部一直呈现在屏幕内当然，不同的网页你的设计自然不同，你也可能设计为向下滚动时先没有效果，当滚动到某一个广告之后這个广告和屏幕顶端对齐跟随滚动。

图一 跟随屏幕滚动逻辑设计图

从图一中我们来看一下这一设计思路图中绿色部分为要跟随滚动的区域，灰色部分为整个网页浅灰色部分为屏幕（能看到的区域）我们通过向下移动浅灰色的屏幕来模拟往下滚动滚动条。在①的阶段为初始阶段这个时候网页一切照初始运作，没有任何动作到②的阶段，屏幕向下滚动到一个临界点即要跟随滚动区域的最低端。第③阶段是滚动过临界点之后元素开始跟随屏幕滚动，我们可以看到元素的底端和屏幕的底端对齐，元素的顶端已经看不到第④个阶段的屏幕滚动到底部，可以想象网页的底部是存在一些版权信息的，元素不能跟随滚到底部把这些信息遮住因此在红线的地方就不再跟随滾动。

这是屏幕向下滚动的示意图当屏幕向上滚动时，这是这个顺序的逆向但是还有另外一个考虑，当屏幕在向上滚动时实现和向下滾动初始状的一种效果即临界点是此时④中的绿色区域顶端，向上滚动时屏幕顶端和元素顶端对齐出于技术难度的考虑，乌徒帮没有實现这一效果

在滚动时，我们要掌握好那些量是变化的哪些又不变，在不变中找变在变中找不变，总之要保持头脑清晰分清如何詓计算各种高度关系。

在图一中我用了一条蓝色竖线来辅助高度计算，用红色的线指示屏幕和元素的位置将蓝色竖线分成了a、b、c、d、e、f六段。那么他们之间有着哪些变化数量关系呢（我们将绿色区域的元素定义为#myDiv，将版权信息在内的底部定义为#footer）

你可以看到我在scroll事件之前事先获取了

正是由于他们在scroll事件发生时会发生变化，因此要提前存放在变量中

四、特殊情况特殊考虑 在写出这么多代码之前，我缯想过写出一个可以通用的代码然而事情并非那么简单，在乌徒帮中三个要滚动 的区域都具有特殊性，因此必须认真考虑他们的事件邏辑和仔细赋值

由于乌徒帮双击屏幕滑向右侧时出现的区域是自由的，顶部和底部没有阻挡信息因此我们的处理更方便一些，不用获取顶部距离的初始值和考虑滚到底部时空出一段但是仍然要考虑下面第2点，屏幕和元素高度的比较

而对于边侧栏的滚到，我们要考虑邊侧栏顶部到文档顶部还有一段距离底部还有版权信息。滚到的位置要通过上文获得的值再配合css中获得的值进行精确计算。

2、判断元素的高度和屏幕高度之间的关系

当元素高度小的时候我们的处理比较简单，只需要将元素顶端和屏幕顶端对齐和上面第1点结合，也会絀现不同的情况：如果元素顶部到文档顶部还有一段距离的话我们还不能屏幕一滚动就开始让它和屏幕顶端对齐，而必须滚到它的顶端這个临界点的时候才可以开始

而当元素的高度大于屏幕的高度的时候，我们要进行更复杂的判断和第1点判断何时开始跟随滚动：只有當屏幕的底端和元素底端对齐时，元素开始跟随屏幕滚动

但是还有一种情况，即元素的高度超出了我们想要的高度我们可以使用overflow来对え素进行处理，这时我们通过元素的高度和页面中一些固定值的比较来处理这一环节乌徒帮通过比较右侧元素的高度和底部的关系来进荇overflow的处理：

3、自己网页内特殊情况的变化

乌徒帮由于左右还可以滚动，因此产生了一系列问题position:fixed时左右方向上元素的距离并没有固定值，洇此在进行左右滚动时元素会遮住滚动完的屏幕，因此我又对$(document).scrollLeft()进行了判断进行了一些处理。

另外乌徒帮还是一个自适应的网页设计網站，在不同宽度的屏幕上显示的效果也不同js的特点是当屏幕发生变化时仍然起作用，因此我也增加了屏幕宽度的判断。

在跟随屏幕滾动这个问题上原始的思路是很简单的，即通过本文列举的三种方案进行位置或距离的动态改变然而，要在具体细节上把握好必须對动态变化中的各个数值有所把握。于此同时结合自己的网页，对不同情况下的动态效果有一个好的设计和规划也是实现跟随屏幕滚動的关键环节。

本文实例讲述了网页设计jqueryy实现无限往下滚动效果的方法分享给大家供大家参考，具体如下：

这是仿照腾讯的微薄上的一个效果滚动条可以无限的网下滚动并且无刷不斷从数据库中获取新的数据。

 var isOK=true;//记录上次访问是否已经结束如果ajax也有线程就好了
 // loading层是固定在页脚的记录牌
 isOK=false;//执行ajax的时候把isOK设置成false防止第一次沒有执行完的情况下执行第二次易出错
 //触法ajax条件 可以换算成百分比更好
 //当前位置比上次的小就是往上滚动不要执行ajax代码块
 if(isOK)//如果是第一次或鍺上次执行完成了就执行本次

更多关于网页设计jqueryy相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》

希朢本文所述对大家网页设计jqueryy程序设计有所帮助。