隱藏每個多個可滾動div的元素

我正在嘗試淡出三個 div 滾動頂部的徽標。

我希望這樣，當用戶滾動一個 div 時，徽標會從正在滾動的 div 中消失，而不是從所有的 div 中消失。

再次滾動到頂部也有問題，logo變淡了。它應該恢復到完全不透明。

這是我到目前為止所擁有的。

$("#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>

uj5u.com熱心網友回復：

下面的滾動功能根據滾動的內容選擇適當的徽標<div/>。它還將 3 個滾動事件處理程式合并為一個。

您在逐漸變回完全不透明時遇到的問題是因為您的第一個滾動處理程式有(10-scroll)/100)而不是(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>

標籤：javascript网页格式查询CSS

上一篇：如何從表中洗掉除第一個單元格值包含特定字串的行之外的所有行？

下一篇：單擊按鈕將元素移動到不同位置