I have a transparent navbar that I want to gradually change color until it becomes opaque as it moves below a specific div. Currently, I am using the following code:
$(document).scroll(function() {
var dHeight = $(this).height()-$(window).height();
if (dHeight >= $(this).scrollTop()) {
$('nav').css('background', 'rgba(53,145,204,' + $(this).scrollTop() / dHeight + ')');
}
});body {
margin: 0;
}
nav {
background: rgba(53, 145, 204, 0);
position: fixed;
top: 0;
width: 100%;
}
nav ul > li {
display: inline-block;
}
.container {
height: 1000px;
margin-top: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="container">
<div>
Scroll me...
</div>
</div>However, instead of becoming fully opaque when it reaches the bottom of the page, I would like it to become opaque after passing below a certain div. Can someone assist with this modification? Thank you in advance.