Question

我的网站上有一个侧边栏小部件，当我滚动页面时，侧边栏将变为位置固定。但是这个侧边栏阻碍了页脚。我希望在触摸页脚时固定侧边栏，类似于此脚本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>

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

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

2 个答案: