I am attempting to create a sticky, transparent div that changes its color based on the background behind it. I have both dark and light colored divs, and I want the sticky div to adjust its text color accordingly (white on dark backgrounds, black on light backgrounds).
https://i.sstatic.net/qPcyC.png
Here is my HTML setup:
<div id="sticky">Menu</div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>
<div class="content dark"></div>
<div class="content light"></div>
I have already discovered a partial solution here:
var stickyOffset = $("#sticky").offset();
var $contentDivs = $(".content");
$(document).scroll(function() {
$contentDivs.each(function(k) {
var _thisOffset = $(this).offset();
var _actPosition = _thisOffset.top - $(window).scrollTop();
if (_actPosition < stickyOffset.top && _actPosition + $(this).height() > 0) {
$("#current").html("Current div under sticky is: " + $(this).attr("class"));
$("#sticky").removeClass("light dark").addClass($(this).hasClass("light") ? "light" : "dark");
return false;
}
});
});
The issue I am currently facing is that when my sticky div has the property top:50%, it does not function as intended.
Does anyone have a solution for this problem?