到达页脚时jQuery停止固定侧边栏答案

【问题标题】：jQuery Stop Fixed Sidebar When Reach Footer到达页脚时jQuery停止固定侧边栏
【发布时间】：2013-12-26 03:53:24
【问题描述】：

我的网站上有一个侧边栏小部件，当我滚动页面时，侧边栏将固定位置。但是这个侧边栏阻碍了页脚。我希望在触摸页脚时修复侧边栏停止，例如这个脚本http://jsfiddle.net/bryanjamesross/VtPcm/

这是我的网站http://www.creativebrain.web.id/view/gadget/171/performa-buas-lg-g2-menantang-samsung-galaxy-s4

这是我固定侧边栏位置的代码

    <script type="text/javascript">
    $(function() {
        var nav = $('#gads300x600');
        var navHomeY = nav.offset().top;
        var isFixed = false;
        var $w = $(window);
        $w.scroll(function() {
            var scrollTop = $w.scrollTop();
            var shouldBeFixed = scrollTop > navHomeY;
            if (shouldBeFixed && !isFixed) {
                nav.css({
                    position: 'fixed',
                    top: '90px',
                    left: nav.offset().left,
                    width: nav.width()
                });
                nav.css('z-index',999);
                isFixed = true;
            }
            else if (!shouldBeFixed && isFixed)
            {
                nav.css({
                    position: 'static'
                });
                isFixed = false;
            }
        });
    });
    </script>

我已经修改了上面 jsfiddle 中的脚本之类的代码，但我认为我的代码有问题

    <script type="text/javascript">
    $(function() {
        var nav = $('#gads300x600');
        var footer = $('#copyright');
        var navHomeY = nav.offset().top;
        var navFooterY = footer.offset().top;
        var isFixed = false;
        var $w = $(window);
        $w.scroll(function() {
            var scrollTop = $w.scrollTop();
            var shouldBeFixed = scrollTop > navHomeY;
            var maxY = navFooterY - nav.outerHeight();
            if (shouldBeFixed && !isFixed) {
                if (scrollTop < maxY) {
                    nav.css({
                        position: 'absolute',
                        top: '0px',
                        left: nav.offset().left,
                        width: nav.width()
                    });
                    nav.css('z-index',1000);
                }
                else{
                    nav.css({
                        position: 'fixed',
                        top: '90px',
                        left: nav.offset().left,
                        width: nav.width()
                    });
                    nav.css('z-index',1000);
                }
                isFixed = true;
            }
            else if (!shouldBeFixed && isFixed)
            {
                nav.css({
                    position: 'static'
                });
                isFixed = false;
            }
        });
    });
    </script>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

请使用以下脚本修复侧边栏。

<script type="text/javascript">
$(document).ready(function(e) {
    var containerTop = $('.container').offset().top;
    $(window).scroll(function(){
        var scrollT = $(window).scrollTop();
        if(scrollT > containerTop){
            $('.sidebar').css({position:'fixed',zIndex:1000,top:'110px'});
        }else{
           $('.sidebar').css({position:'relative',zIndex:1000,top:'0px'});   
        }
    });
});
</script>

【讨论】：

它将永远修复侧边栏。就像我正在谈论的jsfiddle.net/bryanjamesross/VtPcm 中的这个脚本一样。如何修改我的代码？
我在我的情况下添加了 eles 案例。现在请检查。

【解决方案2】：

$(function () {
var nav = $('#gads300x600');
var footer = $('#copyright');
var navHomeY = nav.offset().top;
var navFooterY = footer.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function () {
    var scrollTop = $w.scrollTop();
    var topSidebar = navHomeY;
    var topFooter = navFooterY;
    var bottomSidebar = nav.offsetHeight + topSidebar;
    var footerIsOnSight = (scrollTop + $window.innerHeight) >= topFooter;
    var shouldBeFixed = (scrollTop + $window.innerHeight) >= bottomSidebar ;
    var maxY = navFooterY - nav.outerHeight();

    if (!isFixed && shouldBeFixed) {
        nav.css({
            position: 'fixed',
            top: '90px',
            left: nav.offset().left,
            width: nav.width()
        });
        nav.css('z-index', 1000);
        isFixed = true;
    }

    if ((isFixed && (scrollTop <= 0))) {
        nav.css({
            position: 'absolute',
            top: '0px',
            left: nav.offset().left,
            width: nav.width()
        });
        nav.css('z-index', 1000);
        isSticked = false;
    } else {
        if (isSticked && footerIsOnSight) {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    }
});
});

【讨论】：