jquery 滚动跟随 到达底部时会停止跟随特效代码

本文的方法兼容性较差，可能对于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 - 多个菜单导航滚动跟随，全部积累固定在顶端

4、jquery 实现导航栏置顶跟随窗口滚动

5、即插即用javascript 导航/广告 窗口滚动跟随的效果

6、Jquery制作左侧浮动层滚动时跟随页面滚动

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！