由于平常写网站的时候经常遇到有一个侧边栏悬浮框，需要伴随网页的滚动让其一直处于窗口的可见区域，于是就写了一个基于jQuery的通用的小插件方便以后开发。
如果项目不适用jQuery，可以下载源码将里面jQuery方法替换成原生js就好了
具体效果如下图所示
本插件充分考虑了实际开发当中的各种需求，其中主要包括：
1、页面自适应
2、避免公共固定头部和尾部的影响
3、当主体区域高度低于悬浮区域高度时自动取消悬浮（尤其适用于分类或分页时的高度不固定）
4、当右侧悬浮区域高度高于屏幕高度时可以滚动查看悬浮区域，之后再随屏幕滚动（具体效果参考demo）
5、可以选择是否启用函数节流，避免频繁触发滚动事件导致浏览器性能降低（同时添加transition动画）
下面是具体使用代码 （点击下载scrollFixed源码）
<style type="text/css">
.top{height:100px;}
.top-box{position:fixed;top: 0;left: 0;right: 0;height: 50px;background: #aaa;z-index: 1;}
.lf{background:#eee;margin-right: 320px;}
.lf>div{height:500px;}
.b1{background:#7373ea;}
.b2{background:#ecbc73;}
.b3{background:#73caec;}
.b4{background:#ec7973;}
.rt{float:right;width:300px;background:#ccc;}
.rt>div{height:300px;}
div{color:#fff;}
</style>
<div class="top">
<div class="top-box">顶部头部</div>
</div>
<div class="clearfix">
<div class="rt scrollBox">
<div class="b4">右侧悬浮区域</div>
<div class="b2"></div>
</div>
<div class="lf">
<div class="b1">左侧主体区域</div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div>
<div style="height:500px"></div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
(function(){window.scrollBox=function(a){var b=this;b.box=a.box||".scrollBox";b.top=a.top||"0px";b.minWidth=a.minWidth||0;b.bottom=a.bottom||0;b.space=a.space||20;b.transition=a.transition==false?false:true;if(a.maxHeightBox){b.maxHeight=$(a.maxHeightBox).offset().top+$(a.maxHeightBox).height()}b.init()};scrollBox.prototype={init:function(){var e=this,d=window.innerWidth,b=window.innerHeight;boxT=$(e.box).offset().top,boxH=$(e.box).height(),boxMT=0;$(window).resize(function(){e.throttle(c,200,3000)()});if(d>=e.minWidth){if(e.transition){$(e.box).css("transition","margin 0.1s ease-out");$(window).scroll(function(){e.throttle(a,200,3000)()})}else{$(window).scroll(function(){a()})}a()}function c(){d=window.innerWidth;b=window.innerHeight;boxT=$(e.box).offset().top-parseFloat($(e.box).css("margin-top"));boxH=$(e.box).height()}function a(){if(d>=e.minWidth){if(e.maxHeight<boxT+boxH+e.space){return false}var g=$(window).scrollTop();if(boxH>b-e.top-e.space*2){if(g<=(boxT-e.top-e.space)){$(e.box).css({"margin-top":"0"})}else{if(e.maxHeight){if(g>e.maxHeight+e.space-b){$(e.box).css({"margin-top":e.maxHeight-boxT-boxH+"px"});return false}}var f=g-boxT-(boxH+e.bottom+e.space-b);if(f<boxMT){if(g<$(e.box).offset().top-e.top-e.space){boxMT=g-boxT+e.top+e.space}}else{boxMT=f}$(e.box).css({"margin-top":boxMT+"px"})}}else{if(g<=(boxT-e.top-e.space)){$(e.box).css({"margin-top":"0"})}else{if(e.maxHeight){if(g>e.maxHeight-boxH-e.top-e.space){return false}}var f=g-boxT+e.top+e.space;$(e.box).css({"margin-top":f+"px"})}}}}},throttle:function(c,b,a){var e=null;var d=null;return function(){var f=+new Date();!d&&(d=f);if(a&&f-d>a){c();d=f}else{clearTimeout(e);e=setTimeout(function(){c();d=null},b)}}}}}());
new scrollBox({
box:'.scrollBox', //悬浮框id或class
top:50, //顶部固定header高度
bottom:0, //底部固定footer高度
space:20, //悬浮框距离头部和尾部的间距
maxHeightBox:'.lf', //需要跟随主体内容的id或class
minWidth:1000, //需要悬浮跟随的屏幕最小宽度
transition:true //是否启用函数节流和跟随动画
});
</script>