如何在屏幕上显示页脚时隐藏固定的DIV？

Question

我有一个固定的侧边栏,在向下滚动时可以在页面上看到.

问题是 - 在某些情况下 - 边栏在到达页面底部时越过页脚.

当页脚在屏幕上可见时我想隐藏侧边栏以避免这种情况.我该怎么做？

Answer 1

试试这个:

var isScrolledIntoView = function(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on('scroll', function () {
    $('#sidebar').toggle(!isScrolledIntoView('#footer'));
});

参考:滚动后检查元素是否可见

在窗口滚动上调用该函数并检查是否footer可见.如果可见,它会隐藏sidebar其他节目.