我想檢測用戶的滾動并通過添加一個類 wjen 將元素固定到頂部，它通過 scolling 和 below 到達。當用戶在元素上方滾動時，應洗掉該類。我不能使用 css 屬性 position: sticky。
我目前正在使用 IntersectionObserver，但它會添加固定類，即使元素因為!entry.isIntersecting. 有辦法解決這個問題嗎？只有當滾動到元素下方時，是否有另一種或更好的方法來添加固定類？
const watcher = document.querySelector('.watcher');
const evu = document.getElementById('box');
const createObserver = () => {
const options = {
root: null,
trackVisibility: true,
delay: 100,
threshold: [.9]
}
const handler = (entries) => {
entries.forEach((entry) => {
entry.target.nextElementSibling.classList.toggle('fixed', !entry.isIntersecting);
})
}
if ('IntersectionObserver' in window) {
const observer = new window.IntersectionObserver(handler, options);
observer.observe(watcher);
}
};
在這里擺弄。
uj5u.com熱心網友回復：
肯定有幾種方法可以做到這一點，但使用您的代碼最簡單的方法是添加一個檢查以查看當前滾動位置window.scrollY是否大于或等于元素的 y 位置entry.boundingClientRect.top。
const watcher = document.querySelector('.watcher');
const evu = document.getElementById('box');
const createObserver = () => {
const options = {
root: null,
trackVisibility: true,
delay: 100,
threshold: [.9]
}
const handler = (entries) => {
entries.forEach((entry) => {
entry.target.nextElementSibling.classList.toggle('fixed', !entry.isIntersecting && window.scrollY >= entry.boundingClientRect.top);
})
}
if ('IntersectionObserver' in window) {
const observer = new window.IntersectionObserver(handler, options);
observer.observe(watcher);
}
};
window.addEventListener('load', () => {
createObserver();
}, false);
window.addEventListener('scroll', () => {
createObserver();
}, {
passive: true
});.fixed {
position: fixed;
top: 0;
border: 1px solid red;
}<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="watcher"></div>
<div id="element">
Add fixed class only when I'm intersected or below.
Remove class when above element.
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>筆記
通過將事件偵聽器附加到物件的滾動事件window并檢查視窗的 y 位置是否大于或等于特定元素的頂部位置，您絕對可以在沒有交叉觀察器的情況下執行此操作。
uj5u.com熱心網友回復：
請檢查這個。在閱讀以下檔案后，我不久前能夠做這樣的事情：https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/533632.html
上一篇：當我在useContext()中呼叫它時，React背景關系未定義
下一篇：單擊元素時切換類