我有一個我正在開發(fā)的網(wǎng)站（這是一個基本示例），昨天我得到了一些幫助來在單選按鈕導(dǎo)航上實現(xiàn)活動狀態(tài)，我現(xiàn)在正在嘗試將其鏈接起來，以便它在頁面滾動時也會發(fā)生變化/當(dāng)當(dāng)前查看時它只是onClick。我大致知道如何實現(xiàn)這一點，因為我之前做過類似的事情，但后來我想到，因為頁面和滾動條被旋轉(zhuǎn)以適應(yīng)水平效果，我不知道它現(xiàn)在是 scrollTop 還是 scrollLeft。我以前從未使用過 scrollLeft，所以我不確定如何正確使用它。我想知道是否有人以前實現(xiàn)過類似的東西，正確的方法是什么？我已經(jīng)嘗試了兩者，但似乎沒有任何效果。這就是我大致想要實現(xiàn)的目標(biāo)（但一次只有一個課程處于活動狀態(tài)）。我想也許使用 Waypoints 可能是另一種選擇，但同樣很難在網(wǎng)上找到任何內(nèi)容來解釋當(dāng)網(wǎng)站多次旋轉(zhuǎn)時這是如何工作的。我的 JS 知識不穩(wěn)定（仍在學(xué)習(xí)?。?，我只是想實現(xiàn)我認(rèn)為可行的方法，所以這可能甚至不正確，任何理解我做錯了什么的幫助將不勝感激！// --- change span classes on click const setIconState = (icon, state) => icon.className = state ? icon.className.replace('button-off', 'button-on') : icon.className.replace('button-on', 'button-off')const toggleIcon = element => { const className = element.className; element.className = className.indexOf('button-on') > -1 ? setIconState(element, false) : setIconState(element, true);}const setIconActiveState = (icon, state) => icon.className = state ? icon.className = `${icon.className} active` : icon.className = icon.className.replace('active', '')document.querySelectorAll('.bottomnav span.icon') .forEach(icon => { icon.onclick = (e) => { const { target: clickedSpan } = e; const siblings = [...clickedSpan.parentElement.parentElement.querySelectorAll('span.icon')] .filter(sibling => sibling != clickedSpan); siblings.forEach(icon => { setIconState(icon, false); setIconActiveState(icon, false); }); setIconState(clickedSpan, true); setIconActiveState(clickedSpan, true); }; }); // --- change span classes on scroll testfunction onScroll(event){ var scrollPos = $(document).scrollTop(); $('.bottomnav a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { currLink.addClass("active"); } else{ currLink.removeClass("active"); } });}
水平網(wǎng)站上的 scrollTop 或 scrollLeft？
胡子哥哥
2021-08-26 17:46:32
