本文的方法兼容性较差，可能对于chrome firefox浏览器不太支持！
推荐：《jQuery插件 - theia-sticky-sidebar - 智能侧边栏跟随固定范围浮动的效果》兼容性较好！
今天分享的是，在滚动跟随达到底部后，自定停止跟随的特效代码，亲测可用！
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jquery 滚动跟随 到底部停止跟随</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
*{ padding:0px; margin:0px;}
.box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden; margin-bottom:20px;}
.main{ width:770px; height:2000px; background:#000; float:left;}
.sub{ width:220px; height: auto;background:#FC6; float:right;}
.fixed{ width:220px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center;}
.fixed .boxs{background:red; height: 168px; color:#fff; line-height: 200px;border:1px solid #fff;}
.fix {
position: fixed;
bottom: 0;
_position: absolute;
_top: documentElement.scrollTop - this.parentNode.clientHeight+documentElement.clientHeight;
}
.fix-btm {
position: relative;
zoom: 1;
}
.clearfix{*zoom:1} .clearfix:after{content:"\20";clear:both;height:0;display:block;overflow:hidden}
.footer,.header{background:#000; height:400px; color:#fff;}
.header{margin-bottom:5px;}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="box clearfix">
<div id="Jmain" class="main">1111111</div>
<div class="sub" id="Jsub">
<div id="JfixBox" class="fixed">
<div class="boxs">1</div>
<div class="boxs">2</div>
<div class="boxs">3</div>
<div class="boxs">4</div>
<div class="boxs">5</div>
<div class="boxs">6</div>
</div>
</div>
</div>
<div class="footer">尾部</div>
<script type="text/javascript">
$(function(){
var $main = $('#Jmain'),
mainHeight = $main.height(),
$fixBox = $('#JfixBox'),
subHeight = $('#Jsub').height(),
winHeight = $(window).height(), //窗口大小
mainBottomPos = $main.offset().top + mainHeight,
maxTop = mainHeight - $fixBox.height() - (subHeight-$fixBox.height()),
threshold = maxTop;
$(window).scroll(function(){
var scrollTop = $(document.body).scrollTop(),
delta = mainBottomPos - winHeight - scrollTop;
if(delta <= 0){
$fixBox.addClass('fix-btm');
$fixBox.css('top',maxTop);
}else if(delta <= threshold){
$fixBox.removeClass('fix-btm');
$fixBox.css('top','auto');
if(!$fixBox.hasClass('fix')){
$fixBox.addClass('fix');
}
}else{
$fixBox.removeClass('fix-btm');
$fixBox.removeClass('fix');
}
});
});
</script>
</body>
</html>之前发布的几篇关于导航跟随，全都是无限跟随模式，意思是跟随到底，如果把侧栏进行滚动跟随设置的话，跟随过程中甚至会把底部进行覆盖，而不是到达底部后停止跟随。
无其它限制跟随分享：
1、jQuery 导航菜单、广告 —— 固定、置顶、跟随（推荐）
2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码（推荐）
3、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端