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

那样的事情

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的高度并检查其顶部位置+高度是否不超过页脚的顶部位置。

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

1 个答案: