当屏幕顶部触及另一个 div 时显示 div

Question

我正在尝试通过滚动使用 jquery 使 div 出现和消失。我希望它在屏幕上出现名为 "contingut-pagina" 的 div 时出现，下面显示的代码正在运行，但是当它触及屏幕底部时它会更改类，我希望它这样做当 div 触及顶部时。这是可能的？我在这里复制当前代码：

function viewportCustom() {
    $(window).scroll(function() {
        if($(window).scrollTop() > ($(".contingut-pagina").position().top - $(window).height())) {
            $(".block-simplified-social-share").css("opacity", "1");
        }
        if($(window).scrollTop() < ($(".contingut-pagina").position().top - $(window).height())) {
            $(".block-simplified-social-share").css("opacity", "0");
        }
    })
}

Answer 1

如果可行，请告诉我，这是解决方案：

function viewportCustom() {
$(window).scroll(function() {
    if($(window).scrollTop() > ($(".contingut-pagina").position().top - $(window).height())) {
        $(".block-simplified-social-share").css("opacity", "1");
    }else if($(window).scrollTop() < ($(".contingut-pagina").position().bottom - $(window).height())) {
        $(".block-simplified-social-share").css("opacity", "0");
    }
})
}

您也可以寻求此博客的帮助： How to show div when user reach bottom of the page?

Answer 2

我找到了一个使用 .offset() 的解决方案，现在它可以正常工作了。感谢大家

function viewportCustom() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= $('.contingut-pagina').offset().top){
            $('.block-simplified-social-share').css("opacity", "1");

        }
        if ($(window).scrollTop() < $('.contingut-pagina').offset().top){
            $('.block-simplified-social-share').css("opacity", "0");

        }

    });
}

当屏幕顶部触及另一个 div 时显示 div

show a div when the top of the screen touches another div

javascript

jquery

scroll

scrolltop