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

参考：Check if element is visible after scrolling

在窗口滚动时调用该函数，并检查footer是否可见。如果可见，则隐藏sidebar其他显示。

Answer 2

嗯......这就是我最终的结果 - 像魅力一样工作:)

$.fn.isVisible = function() {
    // Current distance from the top of the page
    var windowScrollTopView = $(window).scrollTop();

    // Current distance from the top of the page, plus the height of the window
    var windowBottomView = windowScrollTopView + $(window).height();

    // Element distance from top
    var elemTop = $(this).offset().top;

    // Element distance from top, plus the height of the element
    var elemBottom = elemTop + $(this).height();

    return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
}


$(document).ready(function() {
    $(window).scroll(function() {
        if($("#footer").isVisible()) {
            $("#sidebar").addClass('hiddensidebar');
        } else {
            $("#sidebar").removeClass('hiddensidebar');
        }
    });
});

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

2 个答案: