javascript - 如何使用 jQuery 阻止固定元素超出页脚

Question

我将侧边栏中的“开始”元素设置为固定，当它滚动超过某个点时，但在较小的笔记本电脑屏幕(14 英寸到 18 英寸)上，当用户向下滚动时它最终会进入页脚。

我想对其进行设置，以便一旦检测到粘性内容在页脚的 10 像素内，它就会停止。

网站链接

http://previewyournewwebsite.info/otsl/compare-reverse-mortgage-loan-products

这是我使用的代码:

function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('.sticky-anchor').offset().top;
        if (window_top > div_top)
            $('.sticky-element').addClass('sticky')
        else
            $('.sticky-element').removeClass('sticky');
    }

    $(function() {
        if ($('.sticky-anchor').length != 0){
            $(window).scroll(sticky_relocate);
            sticky_relocate();
        }
    });

Answer 1

类似的东西怎么样

function sticky_relocate() {
    var sticky_element = $('.sticky-element');
    var window_top = $(window).scrollTop();
    var div_top = $('.sticky-anchor').offset().top;
    var div_height = sticky_element.height();
    var footer_top = $('.footer').offset().top;
    if (window_top > div_top) {
        sticky_element.addClass('sticky')
    } else {
        sticky_element.removeClass('sticky');
    }
    if(div_top + div_height > footer_top - 10) {
        sticky_element.css("top", footer_top - 10);   
    }
}

$(function() {
    if ($('.sticky-anchor').length != 0){
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    }
});

获取 div 的高度并检查它的顶部位置 + 高度是否不超过页脚的顶部位置。