Question

使用以下代码，当您滚动到该div后，我将其div固定了。但是，我的侧边栏没有随我滚动，这很好。但是我希望它停止，因为否则它将与页脚重叠。我该怎么做？

我使用了以下代码：

var fixmeTop = $('.whitepaper-section').offset().top;
var footer = $('#footer_bg').offset().top;

if ($(window).width() > 1035) {
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop && currentScroll <= footer) {
            $('.whitepaper-section').addClass('fixed');
        } else {
            $('.whitepaper-section').removeClass('fixed');
        }
    });
}

网站为https://cashcontroller.nl/nieuws/

致敬，Joren

Answer 1

你很近。

问题是currentScroll永远都不能高于您的footer职位。

currentScroll是视口上方的像素数量。因此，要传递的元素位置的“参考”是视口的顶部。显然，那永远不会发生在您的页脚上。

所以！您必须将.whitepaper-section的高度添加到currentScroll并与页脚的位置进行比较。

此外，.whitepaper-section固定在top位置...您也必须添加该距离。我在下面的代码中估计为1em。

var fixme = $('.whitepaper-section');
var fixmeTop = fixme.offset().top;
var fixmeHeight = fixme.outerHeight();
var fixedtopOffset = 1em;   // Adjust that with the value you have in CSS .fixed
var footer = $('#footer_bg').offset().top;

if ($(window).width() > 1035) {
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop && currentScroll + fixmeHeight + fixedtopOffset <= footer) {
            $('.whitepaper-section').addClass('fixed');
        } else {
            $('.whitepaper-section').removeClass('fixed');
        }
    });
}

滚动后使div不固定

1 个答案: