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

Question

当用户向下滚动时，我将侧边栏中的“Get Started”元素固定在某个点之后，但在较小的笔记本电脑屏幕（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

What about something like that

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

Get the height of the div and check if its top position + height is not more then the top position of the footer.