該專案具有帶有白色 svg 徽標的粘性選單。當黑色部分選單上方的粘性選單應保持白色時,如果在黑色部分上方,徽標應轉換為黑色。我為此嘗試了很多變體。但它們都不能正常作業。我還嘗試使用舊的 jQuery 庫:背景檢查,但它根本不起作用。這是我創建的最后一個變體:
$(window).scroll(function() {
let headerLogo = $("#header_logo");
let overlaySection = $("#overlay-section");
let headerLogo_top = headerLogo.offset().top;
let headerLogo_bottom = headerLogo_top headerLogo.height();
let overlaySection_top = overlaySection.offset().top;
let overlaySection_bottom = overlaySection_top overlaySection.height();
let services = $("#services");
let services_top = services.offset().top;
let services_bottom = services_top services.height();
if (headerLogo_bottom >= overlaySection_top && headerLogo_top < overlaySection_bottom) {
headerLogo.addClass('black_active')
}else if(headerLogo_bottom >= services_top && headerLogo_top < services_bottom){
headerLogo.removeClass('black_active')
}
else{
headerLogo.removeClass('black_active')
}
});
它幾乎可以作業,但不能正常作業,因為當它不針對下一個黑色塊時,該類更改為 early 并且徽標顏色從黑色變為白色。也許有一些舊的但很好的 jQuery 庫請告訴我需要在這個問題上弄清楚。
uj5u.com熱心網友回復:
除了 addClass 和 removeClass,您是否嘗試過以下方法?
headerLogo.classList.toggle('black_active');
出于某種原因,我也總是被其他兩個卡住,但這似乎總是有效的。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/476351.html
標籤:javascript jQuery
下一篇:重置每個表的計數
