Detect when a div with fixed position crosses over another element

Question

I'm struggling to find out how to detect when a div with position fixed start and finish to hover a certain div while scrolling.

I've a div always in position fixed and centered in my window. While I'm scrolling my page, I would like that the fixed div when starts to hover another one changes its color and remove the color once it finishes to hover. I attached a little schema to illustrate my problem. To resume:

The fixed div when page loads has black color -> Starts to hover a second div, the color turns to white -> Finish to hover the second div, the color is back to black.

I found this issue: Detect when a position: fixed; element crosses over another element

It works when the div start to cross the second one, but it doesn't reset the color when the hover is finished. My code:

$(window).scroll(function() {
  if ($('div.fixed').offset().top < ($(".div-to-cross").offset().top - 0)) {
    $('div.fixed').removeClass('white');
  } else {
    $('div.fixed').addClass('white');
  }
});

Thanks in advance for your help.

View image

Gaskins

Answer 1

You have to take the div heights in account.

There is two "moments" to caculate, the enter and the leave.

So when the bottom of the fixed div enters the top of the scrolled one...
And when the bottom of the scrolled one leaves the top of the fixed.

Here is an example to run:

$(window).scroll(function(){
  var fixed = $("div.fixed");
  
  var fixed_position = $("div.fixed").offset().top;
  var fixed_height = $("div.fixed").height();

  var toCross_position = $(".div-to-cross").offset().top;
  var toCross_height = $(".div-to-cross").height();

  if (fixed_position + fixed_height  < toCross_position) {
    fixed.removeClass('white');
  } else if (fixed_position > toCross_position + toCross_height) {
    fixed.removeClass('white');
  } else {
    fixed.addClass('white');
  }

});

.fixed{
  position:fixed;
  top:calc(50% - 50px);
  left:0;
  background-color:black;
  height:100px;
  width:100%;
}
.white{
  background-color:white;
}
.div-to-cross{
  height:100px;
  background-color:blue;
}

/* just for this demo */
.spacer{
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixed"></div>
<div class="spacer"></div>
<div class="div-to-cross"></div>
<div class="spacer"></div>

Sufficiency

Thank you very much, it works like a charm! However I have pages on the website that don't need the trick to switch the color because the fixed div doesn't have this section to cross and it crash the rest of my javascript. Do you know how we can solve this conflict? – Newspaper

I think I found the solution, I include the whole function in a IF statement: if ($('.div-to-cross').length) { Do something } – Newspaper

Yes... That's the way. Sure if there is no div-to-cross elements... It can be problematic. Your IF statement should work. – Sufficiency

Answer 2

Thank you. I modified it a bit so it works for multiple div-to-cross elements. I´m using it to change my fixed white burger menu when it overlaps a div with white background. Then it got another color until it leaves the white background div.

//Burger Scroll Change Color
$(window).scroll(function(){
    var fixed = $("div.fixed");

    var fixed_position = $("div.fixed").offset().top;
    var fixed_height = $("div.fixed").height();

    var addClass = false;
    $('.div-to-cross').each(function(){

        var toCross_position = $(this).offset().top;
        var toCross_height = $(this).height();

        if (fixed_position + fixed_height  < toCross_position) {
            //fixed.removeClass('white');
        } else if (fixed_position > toCross_position + toCross_height) {
            //fixed.removeClass('white');
        } else {
            addClass = true;
        }
    });
    if(addClass == true){
        fixed.addClass('change-color');
    }else{
        fixed.removeClass('change-color');
    }
});

Sendoff