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

【问题标题】：show a div when the top of the screen touches another div当屏幕顶部触及另一个 div 时显示一个 div
【发布时间】：2018-06-15 13:44:16
【问题描述】：

我正在尝试使用带有滚动的 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");
        }
    })
}

【问题讨论】：

你应该在第二种情况下使用底部。
如果我使用底部，唯一改变的是它出现在通过 div 的末尾时，但我不想要这个。我希望它在 div 顶部穿过屏幕顶部时发生变化。
你是在第一个条件还是第二个条件下使用底部，使用第二个条件作为 else if
你是这个意思？ if($(window).scrollTop()

标签： javascript jquery scroll scrolltop

【解决方案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?

【讨论】：

能否请您创建相同的 jsfiddle 或 codepen。？

【解决方案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");

        }

    });
}

【讨论】：