Блог

Главная - Вопросы по программированию - Исправить контейнер внизу до окна.pageYOffset больше, чем исходное положение контейнера

Исправить контейнер внизу до окна.pageYOffset больше, чем исходное положение контейнера

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я фиксирую положение контейнера stickyDiv в нижней части окна просмотра, как только пользователь прокручивает верхнюю часть stickInDiv , до тех пор, пока его исходное положение (которое я вычисляю из верхней части документа) не будет впервые показано в нижней части окна просмотра. После этого контейнер должен оставаться в исходном положении. При прокрутке вверх он должен снова зафиксироваться в нижней части окна просмотра, как только его исходное положение достигнет нижней части окна просмотра.

Текущее поведение: stickyDiv не остается в исходном положении, как только его исходное положение достигнуто в нижней части окна просмотра.

 window.onscroll = function() {
  scrollFunction();
};

function getTop(elem) {
  const box = elem.getBoundingClientRect();

  const body = document.body;
  const docEl = document.documentElement;

  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;

  const clientTop = docEl.clientTop || body.clientTop || 0;

  const top = box.top   scrollTop - clientTop;

  return Math.round(top)
}


const stickyDiv = document.getElementById('stickyDiv');
const stickyElemTopFromDocumentTop = getTop(stickyDiv);
const Height = stickyDiv.clientHeight; /* height of the sticky element */
const stickInDiv = document.getElementById('stickInDiv');
const stickInDivOffsetTop = stickInDiv.offsetTop;

function scrollFunction() {
  if (window.pageYOffset > stickyElemTopFromDocumentTop) {
    stickyDiv.classList.remove('sticky');
  } else if (window.pageYOffset > stickInDivOffsetTop) {
    stickyDiv.classList.add('sticky');
  } else {
    stickyDiv.classList.remove('sticky');
  }
}  
 #contentAtTop {
  height: 100px;
  background-color: blue;
  opacity: 0.2;
  color: white;
}

#contentBeforeStickyDiv {
  height: 1200px;
  background-color: green;
  color: white;
  opacity: 0.8;
}

#stickyDiv {
  color: white;
  background-color: grey;
  height: 40px;
}

#contentAfterStickyDiv {
  height: 400px;
  background-color: purple;
  color: white;
  opacity: 0.8;
}

.sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
}  
 <body>
  <div id="contentAtTop">Content At Top</div>
  <div id="stickInDiv">
    <div id="contentBeforeStickyDiv">Content Before Sticky Div</div>
    <div id="stickyDiv">Sticky Container</div>
    <div id="contentAfterStickyDiv">Content After Sticky Div</div>
  </div>
</body>