时间戳

首页 > 解决方案 > show a div when the top of the screen touches another div

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

问题描述

I'm trying to make a div appear and disappear by using jquery with scroll. I want it to appear when the div called "contingut-pagina" appears on the screen, the code shown below is working, but it changes the classe when it touches the bottom of the screen and I want it to do so when the div touches the top . It's possible? I copy the current code here:

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");
        }
    })
}

标签： javascriptjqueryscrollscrolltop

解决方案

我找到了一个使用 .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");

        }

    });
}

推荐阅读