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

Question

I have a sidebar widget on my website, when I scroll the page, sidebar will become position fixed. But this sidebar obstruct the footer. I want the sidebar stop fixed when touch the footer, something like this script http://jsfiddle.net/bryanjamesross/VtPcm/

This is my website http://www.creativebrain.web.id/view/gadget/171/performa-buas-lg-g2-menantang-samsung-galaxy-s4

Here is my code to fixed position the sidebar

    <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>

I have modified that code like script in jsfiddle above, but I think something wrong in my code

    <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>

Answer 1

Please use below script to make sidebar fixed.

<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>

Answer 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;
        }
    }
});
});