I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date is above the .logo.
Despite trying to calculate the position from the bottom for each element, I am unable to achieve the desired outcome as the logo consistently remains at 0.25 opacity.
Any help or suggestions would be greatly appreciated!
$(window).scroll(function () {
$('.cat-date').each(function(){
var bottom = $(this).position().top+$(this).outerHeight(true);//distance from bottom
if (bottom < 210){
$(".logo").css("opacity","0.25");
}
console.log(bottom)
})
});.cat-date{
height:50px;
width:200px;
color:blue;
margin-bottom:150px;
z-index:9999;
position:relative;
}
.logo{
height:50px;
width:250px;
background-color:red;
position:fixed;
bottom:50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="cat-date">lambada lambada</div>
<div class="logo"></div>