js中页面滚动浮动固定时触底问题的解决

已经很久很久没有更新了，一方面是忙，另一方面是懒，其实一直想记录点什么，但总因为这样活着那样的原因耽搁了，今天好不容易有一点空闲的时间，赶快来更新下。废话就不多说了，今天我想讲的是一个比较常见的问题，浮动固定元素的触底问题解决。

在开发中，我们经常会遇到这样一个需求，当页面滚动到某一个位置X时，页面中某个元素N开始浮动，并在向下滚动的过程中，一直固定在页面的某一处，如果向上滚动，当小于之前开始浮动的位置X时，元素N的定位恢复。一般我们的做法就是在元素需要浮动时将元素的定位设为fixed，并设置其top和left让它固定在某一处，这样看起来并没有任何毛病，看起来效果也是我们想要的，但是这样真的没有问题吗？如果浮动固定元素的长度很长时会怎样呢？

what fuck？作为一个完美主义者的码农，这个是不能忍受的，那么怎么解决呢？

仔细想想如果我们在固定元素N快要触碰到底的时候将N的位置向上移动一点点不就行了。那么问题来了，如何算出固定元素N快要触底的位置呢？带着这种疑问然后开始各种折腾，其实有时候但从问题的过程没办法解决这个问题的时候，我们可以从结果入手反推回去，接下来我们就开始一步步反推。

首先我们想一下如果固定元素的底边刚好触碰到屏幕的最下面，我们需要向上的偏移量。

如上图所示我们很容易得出下面的公式：

offsetTop = fixedNodeHeight - windowHeight;

其中offsetTop代表向上的偏移量，windowHeight等于屏幕可视区的高度（注意不是网页内容的总高度），fixedNodeHeight等于固定元素的高度

那么如果我们要让固定元素的底部刚好和触底元素的最上面重合就很简单了

从图中我们很容易可以看出

offsetTop = fixedNodeHeight - (windowHeight - bottomNodeHeight);

bottomNodeHeight代表触底元素的高度

再知道了定位元素刚好触底需要偏移的距离后，我们很容易得出元素快触底时向上向上移动的开始位置triggerTop = bottomNodeTop - offsetTop

接下来的事情就很简单了，我们只需要判断出可视区的下一位置大于我们算出的triggerTop时，向上偏移多出来的值即可。

您可以猛戳这里查看在线实例。