如何根据条件在滚动时设置元素在固定位置和相对位置之间的位置？

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

在这种情况下，你的小组将在包装会坚持当面板不再需要时，在屏幕之外并且不粘。