滚动后使 div 不固定

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/

此致，乔伦

Answer 1

你很接近。

问题是 currentScroll 永远不会高于您的 footer 位置。

currentScroll 是视口上方的像素数量。因此要传递的元素位置的 "reference" 是视口的顶部。显然，您的页脚永远不会发生这种情况。

所以！ 您必须将 .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 不固定

Make div unfixed after scroll

jquery

scroll

vertical-scrolling