在整个转变过程中，转变的值只有$(window).scrollTop()=$(docment).scrollTop()和$('#myDiv').offset()，因此我们要抓住这些值之间的加减数量关系，做好逻辑判断和赋值。

4、值在什么时候获得

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

var $catalogueOffsetTop = $('aside#catalogue').offset();

var $archiveOffestTop = $('aside#archive').offset();

var $archiveOffestLeft = $('aside#archive').offset().left;

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

四、特殊情况特殊斟酌

在写出这么多代码之前，我曾想过写出一个可以通用的代码，然而事情并不是那么简单，在乌徒帮中，三个要转动 的区域都具有特殊性，因此必须认真斟酌他们的事件逻辑和仔细赋值。

1、元素是否自由随意

由于双击屏幕滑向右侧时呈现的区域是自由的，顶部和底部没有阻挡信息，因此我们的措置更便利一些，不消获得顶部距离的初始值和斟酌滚到底部时空出一段。可是仍然要斟酌下面第2点，屏幕和元素高度的比较。

而对边侧栏的滚到，我们要斟酌边侧栏顶部到文档顶部还有一段距离，底部还有版权信息。滚到的位置要通过上文取得的值，再配合css中取得的值进行切确计较。

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

当元素高度小的时候，我们的措置比较简单，只需要将元素顶端和屏幕顶端对齐，和上面第1点连络，也会呈现不合的情况：如果元素顶部到文档顶部还有一段距离的话，我们还不克不及屏幕一转动就起头让它和屏幕顶端对齐，而必须滚到它的顶端这个临界点的时候才可以起头。

而当元素的高度年夜于屏幕的高度的时候，我们要进行更复杂的判断，和第1点判断什么时候起头跟从转动：只有当屏幕的底端和元素底端对齐时，元素起头跟从屏幕转动。

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

......}else if($('#right-area').height() >= ($('footer').offset() + $('footer').height())){$('#right-area').height($('footer').offset() + $('footer').height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});}

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

笔者网站由于左右还可以转动，因此产生了一系列问题，position:fixed时左右标的目的上元素的距离并没有固定值，因此在进行左右转动时，元素会遮住转动完的屏幕，因此我又对$(document).scrollLeft()进行了判断，进行了一些措置。

别的，仍是一个自适应的网页设计网站，在不合宽度的屏幕上显示的效果也不合，js的特点是当屏幕产生转变时仍然起作用，因此，我也增加了屏幕宽度的判断。

总结

在跟从屏幕转动这个问题上，原始的思路是很简单的，即通过本文枚举的三种方案进行位置或距离的动态改变，然而，要在具体细节上掌控好，必须对动态转变中的各个数值有所掌控。于此同时，连络自己的网页，对不合情况下的动态效果有一个好的设计和打算，也是实现跟从屏幕转动的关头环节。

作者：否子戈

原文地址：乌徒帮 .utubon/306/