如何根據條件在滾動時設置元素在固定位置和相對位置之間的位置？

Question

<div id="wrapper"> 
<div id="left-panel"></div> 
<div id="long-right-panel></div> 
</div> 
<footer></footer> 

在滾動，我有一個問題打交道時的#wrapper頂部位置是< = 0，當從#left-panel底部位置減去footer頂部位置是> = 0，我想的#left-panel有風格固定的位置。否則它應該有相對的位置。

我遇到了一個問題，一旦滿足上述條件，＃左面板在相對位置和固定位置之間翻轉。

下面是澄清一些代碼：

// creates event listener 
window.addEventListener('scroll', handleScroll); 

// get DOM elements outside of scroll event 
    const wrapperRect = document.getElementById('wrapper').getBoundingClientRect(); 

    const leftPanel = document.getElementById('left-panel'); 
    const leftPanelRect = leftPanel.getBoundingClientRect(); 

    const rightPanel = document.getElementById('long-right-panel'); 
    const rightPanelRect = rightPanel.getBoundingClientRect(); 

    const footerRect = document.querySelector('footer').getBoundingClientRect(); 

function handleScroll() { 
    /* if the #wrapper has scrolled past the top of the viewport and the space between the top of the footer and the bottom of the #left-panel is greater than 0, set #left-panel to position fixed */ 
    if (wrapperRect.top <= 0 && (footerRect.top - leftPanelRect.bottom) > 0) { 
    leftPanel.setAttribute("style", "position: fixed; top: 3rem;"); 
    rightPanel.setAttribute("style", "margin-left: 45%;"); 
    } 
    /* else set the #left-panel position to relative */ 
    else { 
    leftPanel.setAttribute("style", "position: relative;"); 
    rightPanel.setAttribute("style", ""); 
    } 
} 

代碼工作，除了，我需要某種標誌或打破它的手段，因爲它代表，當條件爲真，其固定，但是當它們是假的，#left-panel跳回到它的原始位置和#wrapper頂部是< 0，並且footerRect.top和leftPanelRect.bottom之間的間隔大於0並且將其改變爲固定...然後滾動變回相對。 ..這會導致跳躍和閃爍。

有關如何解決的任何建議？

Answer 1

您的代碼實際運行良好，我在Windows 8.1上使用最新的Chrome進行了測試。但是，如果你的意思是，當你滾動第一個時間頁面跳轉，嘗試添加

window.addEventListener('load', handleScroll); 

在腳本的頂部 - 要檢查的條件，並在頁面加載設置樣式：

<style> 
#wrapper { 
    height: 200vh; 
    width: 100%; 
} 

#left-panel { 
    background-color: #f90; 
    height: 200px; 
    width: 45%; 
} 

#long-right-panel { 
    background-color: #f09; 
    height: 500px; 
    margin-top: 3rem; 
    width: 55%; 

} 

#footer { 
    background-color: #9f9; 
    height: 100px; 
    width: 100%; 
} 
</style> 

<div id="wrapper"> 
    <div id="left-panel"></div> 
    <div id="long-right-panel"></div> 
</div> 
<footer id="footer"></footer> 

<script> 
// creates event listener 
window.addEventListener('load', handleScroll); 
window.addEventListener('scroll', handleScroll); 

// get DOM elements outside of scroll event 
    const wrapperRect = document.getElementById('wrapper').getBoundingClientRect(); 

    const leftPanel = document.getElementById('left-panel'); 
    const leftPanelRect = leftPanel.getBoundingClientRect(); 

    const rightPanel = document.getElementById('long-right-panel'); 
    const rightPanelRect = rightPanel.getBoundingClientRect(); 

    const footerRect = document.querySelector('footer').getBoundingClientRect(); 

function handleScroll() { 
    /* if the #wrapper has scrolled past the top of the viewport 
    and the space between the top of the footer and the bottom of the #left-panel 
    is greater than 0, set #left-panel to position fixed */ 
    if (wrapperRect.top <= 0 && (footerRect.top - leftPanelRect.bottom) > 0) { 
    leftPanel.setAttribute("style", "position: fixed; top: 3rem;"); 
    rightPanel.setAttribute("style", "margin-left: 45%;"); 
    } 
    /* else set the #left-panel position to relative */ 
    else { 
    leftPanel.setAttribute("style", "position: relative;"); 
    rightPanel.setAttribute("style", ""); 
    } 
} 
</script> 

https://codepen.io/svitch/pen/yzEzmz

通常粘性面板腳本有三個條件：

1. panel.top < wrappe r.top
2. panel.top> wrapper.top & & panel.bottom < wrapper.bottom
3. panel.bottom> wrapper.bottom

在這種情況下，你的小組將在包裝會堅持當面板不再需要時，在屏幕之外並且不粘。