Question

我正在尝试通过使用带滚动的jquery来使div显示并消失。我希望它出现在屏幕上出现名为“contingut-pagina”的div时，下面显示的代码正在工作，但是当它触及屏幕底部时它会改变classe，我希望它在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

2 个答案: