Jquery插件分享：Jquery实现固定区块，固定在顶部，置顶(适合放导航菜单或者广告)

【标题真难起，不知道是自己的表达能力差还是学识浅薄，我看是后者。。。】 不知道什么时候开始刮起这么一阵风，弄个DIV块，里面放置淘宝广告，页面向下滚动的时候，这个DIV一旦顶到浏览器窗口的上边框，就会顶在那里（position:fixed），等页面向上滚动的时候，这个块回到最开始自己的位置的时候就会定位在自己的最原始的位置上，随着页面不断向下走。

大致如下图所示：

因为自己JS差，所以需要的时候直接网上找，发现一个朋友的分享，原理挺简单的：计算要置顶的元素在随着滚动条的滚动，其刚好顶在当浏览器窗口顶部时，这时候滚动条离顶部的距离（也就是此元素距离顶部的距离），然后，一旦滚动条滚到大于这个数值的时候，给这个元素设置(position:fixed),让其在浏览器的顶部，不动；当页面向下滚动时，滚动条向上滚，滚到之前计算好的数值时，将此元素改变为(position:absolute),并且将其的top设置为这个数值。

Jquery插件代码如下：

1. $.fn.smartFloat =function(){
2. var position =function(element){
3. var top = element.position().top, pos = element.css("position");
4. $(window).scroll(function(){
5. var scrolls = $(this).scrollTop();
6. if(scrolls > top){
7. if(window.XMLHttpRequest){
8. element.css({
9. position:"fixed",
10. top:0
11. });
12. }else{
13. element.css({
14. top: scrolls
15. });
16. }
17. }else{
18. element.css({
19. position:"absolute",
20. top: top
21. });
22. }
23. });
24. };
25. return $(this).each(function(){
26. position($(this));
27. });
28. };

调用很简单：

1. $(function(){
2. $(".caseMenu").smartFloat();//.caseMenu替换为你要置顶的元素，请注意，此元素恢复到原来的位置时，
3. //CSS带有position:absolute,所以得考虑其有一个固定的位置，在其之后的内容不会跑上来。
4. })
5.