Hide a div when another one shows up on the screen?

Asked

Viewed 60 times

1

I’d like to hide one div when another appeared on the screen.

The div I intend to hide has position: fixed, In other words, the scroll accompanies the page, however, the footer has a similar part to that div and I would like to hide the fixed div when the other one is in sight. I tried the following code but no effect.

CODE

$(window).on('scroll', function() {
    if($('#footer').is(":visible")) {
        $(".socials").fadeOut("fast");
    }else{
        $(".socials").fadeIn("fast");
    }
});
jquery css

  • It wouldn’t work to call a method that hides your div and shows the other when you make the other visible?

  • @M.Bertolazo How so?

  • already give an example.

  • 1

    @M.Bertolazo These are not methods that they control, apparently. " Appearing on the screen, "as quoted in the question, refers to the fact that you scroll the page until a certain element in the footer is in the visible area of the page.

  • @Andersoncarloswoss Yes, I got it. Thanks for the explanation, I’ll delete the answer.

1 answer

0


I found a way to do what I wanted

$(window).on('scroll', function() {
    var ell = $('#footer').offset().top;
    var ill = $(document).scrollTop();
    var screen = $(window).height();
    var distance = ell - ill;
    if(distance <= screen ) {
        $(".socials").fadeOut("slow");
    }else{
        $(".socials").fadeIn("slow");
    }
});

First I saw the distance that the footer has, then I saw the position of the scroll and finally I saw the size of the screen. So as soon as the distance is less, he hides the div.

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.