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

Question

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

Upon scrolling, I am dealing with a problem when the #wrapper top position is <= 0 and when the footer top position subtracted from the #left-panel bottom position is >=0, I'd like the #left-panel to have the style position of fixed. Else it should have position of relative.

I'm running into a problem where once the above conditions are met, the #left-panel flips between a position of relative and fixed.

Here's some code for clarification:

// 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", "");
  }
}

The code works except, I need some sort of flag or means of breaking out of it because as it stands, when the conditions are true, its fixed, but when they're false, the #left-panel jumps back to its original position and the #wrapper top is < 0, and the space between the footerRect.top and leftPanelRect.bottom is > 0 and changes it to fixed ... then scrolling changes back to relative ... this causes jumps and flickering.

Any advice on how to fix?

Answer 1

Your code actually works fine, I tested it with latest Chrome on Windows 8.1. But if you mean that page jumps when you scroll 1st time, try to add

window.addEventListener('load', handleScroll);

on top of the script - to check conditions and set styles on page load:

<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

Usually sticky panel scripts have three conditions:

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

In that case, your panel will stick when wrapper is going beyond the screen and unstick when panel is no longer needed.