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

资料来源：网络整理时间：2023/3/4 0:57:26 共计：3697 浏览

本文的方法兼容性较差，可能对于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制作左侧浮动层滚动时跟随页面滚动

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS3中的Opacity多浏览器透明度兼容性问题_CSS学习 | ·下一条：浅谈$(document)和$(window)的区别_js/jQuery

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

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

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

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