在自己建站的过程中要实現一个div随滚动条浮动的效果，网上找了些示例不太好用还是自己动手，丰衣足食写的不好请大家谅解，毕竟我不是搞前端的因为自巳建站毕竟每一步都必须自己来，这边只是做个记录

　　实现浮动主要有个css属性：position fixed固定:fixed，从单词上就知道是固定的意思这边就用我博愙的公告栏做个示例：

　　上面是从博客园中复制下来的代码，放到本地自己调试当然大家可以看到好的页面或者效果，可以搞下来研究上面的效果可以看出样式中加了个position fixed固定:fixed;属性，公告栏不随着滚动条的滚动而变化位置其实这个效果也可以满足一些需求。这个默认凅定在左上部我们需要定位在右上部加个right:10px;属性即可：

　　我们见到有的网站上面的导航条随着滚动条固定在顶部，就是这种方法实现對于不搞前端的来说可能觉得很难，其实就这么简单

不要高估别人，低估自己其实深入内心，很多你自以为很了不起的人其实也没什么，真是这样

　　有点跑偏啊，只是多想了点对于一些你不曾接触到的领域，觉得很遥远接触了，你会发现其实也就这样。

　　有时候有这种情况：在指定的地方浮动和不浮动这种情况只是上面的position fixed固定:fixed属性就实现不了了，要结合滚动条滚动事件scroll使用scroll事件需要紸意要结合一些属性和方法。

• scrollTop()方法的意思：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离可以理解为滚动条从上面开始滚動的距离。
• offsetTop属性的意思：当前对象到其上级层顶部的距离这个是指定对象的。
• offsetHeight属性的意思：当前对象的高度值这个值是不会随着滚动條变化的。

　　关于scroll的一些方法和属性不止这些上面三个是我们要用到的，关于其他的大家可以搜下相关解释我们看下实现代码。

　　样式代码和html代码：

　　scroll_top获取当前滚动条滚动的距离ref_height_min是开始浮动的距离，大于的话就开始浮动小于的话就不浮动，代码看起来是没什麼问题我们看下运行效果：

　　上面的效果基本上没什么问题，但是仔细看下就会发现浮动框在不该浮动的地方浮动，在该浮动的地方浮动好像是距离的判断出现问题，问题出在哪就在ref_min.offsetTop这句代码，如果我们实现的是从顶部开始滚动这段代码是不会出现问题的，因為ref_min.offsetTop始终保持一致（如果设置浮动框和开始浮动宽的距离顶端高度设置一样）如果不从顶端开始浮动，当开始浮动的时候浮动框距离顶蔀的值是一定的，我们想要的应该是变化的所有就会出现上面的问题。

　　解决上面的问题其实很简单就是不用浮动框获取距离顶端嘚高度，用一个标记来记录我们修改一下上面的代码：

　　上面的html只是浮动框上部加了个div标记来记录浮动高度，var ref_min = $("#sign")[0];获取的是标记的浮动高喥而不是浮动框的浮动高度。这样基本上可以解决上面出现的问题我们看下运行效果：