當元素滾動過去一行時，更改元素的CSS屬性

我正在網站上工作，在此網站內，有一個scroll圖標，它具有fixed的位置並因此與用戶一起滾動。由於網站的雙色調設計，我希望此圖標在從淺色背景變爲深色背景時改變顏色。小示例：當元素滾動過去一行時，更改元素的CSS屬性

正如您所看到的，scroll文本現在是白色，在黑色背景上。但是，當它滾動到白色的一面時，我希望scroll文本變黑。

我曾嘗試做的是使用waypoints庫使每個光部分航點，然後改變顏色像這樣：

$('.light').waypoint(function(direction) { 
    $(".scroll").find('span').css('color', '#000'); 
});

然而，當用戶到達的底部這隻會激活.light元素。

有沒有辦法以更流暢的方式做到這一點？謝謝。

編輯就像問的意見，這裏有一個codepen： https://codepen.io/anon/pen/ZyYBKM

來源

2017-06-05 Wesley Peeters

你能提供一個CodePen或的jsfiddle與培訓相關的代碼，請。 –

@JamesDouglas新增了一個codepen :-) –

當前的codepen不會在燈光部分的底部變成黑色。 – JiFus

當然，這是可能的。爲了達到這個效果，你將不得不設置一個偏移量。在這種情況下，偏移量將爲100％。

更新的代碼：

$('.light').waypoint({ 
    handler: function(direction) { 
    if(direction == "down") { 
    $(".scroll").find('div').css('background', '#252A2F'); 
    $(".scroll").find('span').css('color', '#252A2F'); 
    } else { 
     // Scrolling up, reverse the process 
    $(".scroll").find('div').css('background', '#ffffff'); 
    $(".scroll").find('span').css('color', '#ffffff'); 
    } 
    }, 
    offset: '100%' 
}); 
$('.dark').waypoint({ 
    handler: function(direction) { 
    if(direction == "down") { 
    $(".scroll").find('div').css('background', '#ffffff'); 
    $(".scroll").find('span').css('color', '#ffffff'); 
    } else { 
     // Scrolling up, reverse the process 
    $(".scroll").find('div').css('background', '#252A2F'); 
    $(".scroll").find('span').css('color', '#252A2F'); 
    } 
    }, 
    offset: '100%' 
});

鏈接a codepen

來源

2017-06-05 10:10:59 JiFus

這可以在向下滾動時起作用，但不起作用。 –

當然不會，因爲您只是將此代碼添加到燈光部分。 – JiFus

請將該代碼添加到.dark部分。 –

當元素滾動過去一行時，更改元素的CSS屬性

回答

相關問題