div随页面滚动遇顶固定的两种方法(js&jQuery)

一、遇顶固定的例子

我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条，在默认状态时，该工具条是跟随页面滚动的，如下图：

而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图：

类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当我们下拉屏幕浏览最新微博时，工具条也会出现这个效果，如下图：

这个效果看上去方便，贴心，也许还带推动广告的促销呢。原理其实很简单，本文展示两种方法。

二、智能浮动效果的实现原理

它分两种状态，一是默认状态，二是浮动固顶状态。

默认状态就是默认状态，什么也不用做，保持原有的CSS就好。无论有没有对它做定