Hide a div when another one appears on the screen?

Question

Hide a div when another one appears on the screen?

Navigation

#1 by (0 votes)

1

I'd like to hide a div when another appears on the screen.

The div I want to hide has position: fixed , that is to say it accompanies the scroll of the page, however, in the footer has a part similar to this div and I would like to hide the div fixed when the other was 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

asked by anonymous 19.10.2017 / 13:00

1 answer

How to send SMS for free using PHP? [closed] How to use JQuery in Angular 2

score 0 · Accepted Answer

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, barely the distance is smaller, it hides the div.