Changing color of DIV by scrolling another DIV's with specific classes (margin/padding problem)-CodePudding

I'm currently working on a project where the logo color should change depending on the background color.

My only problem is the following: The Logo is switching to the class "inverted" if it scrolls over the black bg02 DIV. Up to here everything is working fine. But if I set a margin and/or padding to the bg02 DIV, than the Logo switches not right anymore (too early in and out). If there is no margin/padding, than it works like a charm.

I've tried it with offsetHeight instead of normal height, but it doesn't work. Can u help me?

$(document).on("scroll", function() {
    // Use logo position:
    var scrollPos = $(document).scrollTop()   $("#logo").position().top   ($("#logo").height() / 2)
    // Or use position from window top:
    // var scrollPos = $(document).scrollTop();
    $('.bg02').each(function() {
        var refElement = $(this);
        if (refElement.position().top <= scrollPos && refElement.position().top   refElement.innerHeight() > scrollPos) {
            $('#logo').addClass("inverted");
            // found one, so exit .each
            return false;
        } else {
            $('#logo').removeClass("inverted");
        }
    });
});

#logo {
    position: fixed;
    top: 20px;
    left: 5%;
    z-index: 100;
    font-size: 26px;
    font-weight: 700;
    color: #000;
}

#logo.inverted {
    color: #fff;
}

.bg01, .bg02 {
    position: relative;
    width: 100%;
    height: 600px;
    margin: 60px auto;
    padding: 40px 0 40px 0;
}

.bg01 {
    background: #fff;
}

.bg02 {
    background: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="logo">Logo</div>


<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

CodePudding user response：

It looks like you didn't take into account the margin in your calculations. Padding won't give you any problems. This will probably work,even though I don't know how effective it is to do these checks for every ".bg02" element.

$(document).on("scroll", function() {
    // Use logo position:
    var scrollPos = $(document).scrollTop()   $("#logo").position().top   ($("#logo").height() / 2)
    // Or use position from window top:
    // var scrollPos = $(document).scrollTop();
    $('.bg02').each(function() {
        var refElement = $(this);
        var margin = parseInt(refElement.css("margin-top"));
        if (refElement.position().top <= scrollPos - margin  && refElement.position().top   refElement.innerHeight()   margin > scrollPos) {
            $('#logo').addClass("inverted");
            // found one, so exit .each
            return false;
        } else {
            $('#logo').removeClass("inverted");
        }
    });
});

#logo {
    position: fixed;
    top: 20px;
    left: 5%;
    z-index: 100;
    font-size: 26px;
    font-weight: 700;
    color: #000;
}

#logo.inverted {
    color: #fff;
}

.bg01, .bg02 {
    position: relative;
    width: 100%;
    height: 600px;
    margin: 60px auto;
    padding: 40px 0 40px 0;
}

.bg01 {
    background: #fff;
}

.bg02 {
    background: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="logo">Logo</div>


<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

CodePudding user response：

Use an overlap function to check if they have any overlap or not. I found and modify this code, But still there are some issues on the bottom of dark divs. Hope it helps. (I don't have enough time to complete this code now. If there was any issue comment and mention me.)

$(document).on("scroll", function() {
  let flag = true;
  const box = $('#logo')

  $('.bg02').each(function() {
    var refElement = $(this);
    if (flag && overlaps(box, refElement)) {
      $('#logo').addClass("inverted");
      flag = false;
    } else if (flag) {
      $('#logo').removeClass("inverted");
    }
  });
});

var overlaps = (function() {
  function getPositions(elem) {
    var offset = $(elem).offset();
    var w = $(window);
    width = $(elem).width();
    height = $(elem).height();

    return [
      [offset.left - w.scrollLeft(), offset.left - w.scrollLeft()   width],
      [offset.top - w.scrollTop(), offset.top - w.scrollTop()   height]
    ];
  }

  function comparePositions(p1, p2) {
    var r1, r2;
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
  }

  return function(a, b) {
    var pos1 = getPositions(a),
      pos2 = getPositions(b);
    return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
  };
})();

#logo {
  position: fixed;
  top: 20px;
  left: 5%;
  z-index: 100;
  font-size: 26px;
  font-weight: 700;
  color: #000;
}

#logo.inverted {
  color: #fff;
}

.bg01,
.bg02 {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 60px auto;
  padding: 40px 0 40px 0;
  border: 1px solid red;
}

.bg01 {
  background: #fff;
}

.bg02 {
  background: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="logo">Logo</div>


<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

<div ></div>