Hide an element per multiple scrollable divs

I am trying to fade out a logo at the top of three divs onscroll.

I would like it so when a user scrolls one div, the logo fades from div that is being scrolled, not all of them.

There is also a problem with scrolling to the top again, the logo is faded. It should return to full opacity.

Here is what I have so far.

$("#col1").scroll(function(){
    var scroll = $("#col1").scrollTop();
    $('img').css('opacity', (10-scroll)/100)
});
$("#col2").scroll(function(){
    var scroll = $("#col2").scrollTop();
    $('img').css('opacity', (100-scroll)/100)
});
$("#col3").scroll(function(){
    var scroll = $("#col3").scrollTop();
    $('img').css('opacity', (100-scroll)/100)
});

#wrapper { border: 2px solid red;overflow:hidden;height:100%;}
.column {width: 33.333%;height:500px; float:left; overflow:scroll;}
#col1 { background-color: grey; }
#col2 { background-color: green; }
#col3 { background-color: yellow;}
img{ height:100px;transition: all 0.1s ease-in;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="col1">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>
<div class="column" id="col2">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>
<div class="column" id="col3">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>

Answer

The scroll function below chooses the proper logo, depending on which <div/> is scrolled. It also consolidates the 3 scroll event handlers into one.

The problem you had in fading back to full opacity is because your first scroll handler had (10-scroll)/100) instead of (100-scroll)/100).

$("#col1,#col2,#col3").scroll(function(){
    var col = $(this);
    var scroll = col.scrollTop();
    col.find('img').css('opacity', (100-scroll)/100);
});

#wrapper { border: 2px solid red;overflow:hidden;height:100%;}
.column {width: 33.333%;height:500px; float:left; overflow:scroll;}
#col1 { background-color: grey; }
#col2 { background-color: green; }
#col3 { background-color: yellow;}
img{ height:100px;transition: all 0.1s ease-in;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="col1">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>
<div class="column" id="col2">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>
<div class="column" id="col3">
<img class="logo" src="https://static.vecteezy.com/system/resources/previews/001/191/989/non_2x/circle-logo-png.png"/>
<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>Line<br>
</div>

Advertisement

Answer