Как лучше изменить положение неподвижного элемента

Question

Пожалуйста, отметьте этот пример . Вы можете увидеть это лучше в Codepen. Я хочу, чтобы #fixed div не покрывал #bottom div. Поэтому я изменяю свойство top на #fixed всякий раз, когда #fixed собирается охватить #bottom.

Но если я прокручиваю страницу слишком быстро, эта ситуация все еще появляется. У вас есть способ это исправить? Спасибо за ваш ответ.

document.addEventListener('wheel', changeFixed, false);

function changeFixed() {
  const footToTop = document.getElementById('bottom').getBoundingClientRect().top;
  const viewHeight = window.innerHeight;
  const isButtom = footToTop + 0 < viewHeight;
  document.getElementById('fixed').style.bottom = isButtom ? 100 + 'px' : 30 + 'px';
}

* {
    margin: 0px;
}
#container {
    height: 300vh;
    display: flex;
    align-items: flex-end;
  
}
#fixed {
    transition: top 1s;
    position: fixed;
    left: 10px;
    bottom: 30px;
    width: 100px;
    height: 200px;
    background: red;
}
#bottom {
    width: 100vw;
    height: 50px;
    background: blue;
}

<div id="container">
  <div id="fixed"></div>
  <div id="bottom"></div>
</div>

Answer 1

Как насчет этого чистого решения CSS, используя position: sticky

* {
    margin: 0px;
}
#container {
    height: 300vh;
    display: flex;
    align-items: flex-end;
    padding-bottom:10px;
  
}
#fixed {
    
    position: sticky;
    left: 10px;
    bottom: 20px;
    width: 100px;
    height: 200px;
    background: red;
}
#bottom {
    width: 100vw;
    height: 50px;
    background: blue;
}

<div id="container">
  <div id="fixed"></div>
  
</div>
<div id="bottom"></div>

Answer 2

Я думаю, вам нужно знать, когда вы прокрутите страницу до конца. Это означает, что если вы прокрутили до дна, вы знаете, что есть bottom div, а затем вы должны переместить ваш fixed div на 50px снизу. Как то так,

function changeFixed() {
  const documentHeight = document.body.scrollHeight;
  const scrollPosition = window.scrollY;
  const viewHeight = window.innerHeight;
  // documentHeight - (scrollPosition + viewHeight) will be 0 when you have scrolled to bottom.
  if (documentHeight - (scrollPosition + viewHeight) <= 50) {
    document.getElementById('fixed').style.top = "auto";
    document.getElementById('fixed').style.bottom = "50px";
  } else {
    document.getElementById('fixed').style.top = "200px";
    document.getElementById('fixed').style.bottom = "auto";
  }
}

PS: вам нужно добавить соответствующие переходы, если вы хотите анимацию.

Answer 3

Как насчет прослушивания события "прокрутка"?

document.addEventListener('scroll', changeFixed, false);