Question

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

滚动时，我在#wrapper顶部位置footer底部位置减去#left-panel顶部位置>＆gt; =时遇到问题0，我希望#left-panel具有固定的样式位置。否则它应该有亲戚的位置。

我遇到了一个问题，一旦满足上述条件，＃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顶部是＆lt; 0，footerRect.top和leftPanelRect.bottom之间的空格是＆gt; 0并将其更改为固定...然后滚动更改回相对...这会导致跳跃和闪烁。

有关如何修复的建议吗？

Answer 1

您的代码实际上运行正常，我使用Windows 8.1上的最新Chrome进行了测试。但是，如果您的意思是在第一次滚动时页面跳转，请尝试添加

ChildComponent

在脚本之上 - 检查条件并在页面加载时设置样式：

window.addEventListener('load', handleScroll);

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

通常粘性面板脚本有三个条件：

panel.top＆lt; wrapper.top
panel.top＆gt; wrapper.top＆amp;＆amp; panel.bottom＆lt; wrapper.bottom
panel.bottom＆gt; wrapper.bottom

在这种情况下，当包装超出屏幕时，面板会粘住，当不再需要面板时，面板会解开。

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

1 个答案: