Как сделать стики-блок выходящий за пределы контейнера нефиксированной высоты?

Question

[art_y10]

Есть блок контейнер parallax__cont (релатив,с заданым z-index)
Есть стики-блок (который при загрузке страницы не стики :-), абсолют, задана позиция top и z-index меньше чем у контейнера).

Высота контейнера не фиксированная. В контейнере могут быть и другие дочерние блоки.

Мне нужно, чтобы при скролле стики-блок начинал плавать (менялась позиция на fixed), а когда при прокрутке страницы этот стики-блок чуть выходил за пределы контейнера parallax__cont снизу (например на 30px или rem) он "останавливался" ( позиция fixed менялась на absolute, задавался отступ уже bottom) и блок уходил вверх при скроллинге...

Нашел здесь такой код. Это почти то, что мне нужно.

https://javascript.ru/forum/events/71003-zakreplen...

Задал у себя два класса is-active и is-bottom (с отрицательным значением bottom).

Переделал его под свои нужды+добавил проверку наличия класса is-active.

var PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM = document.getElementsByClassName("parallax__cont") + 30;
var PAGE_WITHOUT_BOTTOM = (document.body.scrollHeight - PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM);
  var el = document.querySelector('.parallax__back');
  var parentEl = document.querySelector('.parallax__cont');

  window.addEventListener('scroll', function(){
    if(window.pageYOffset > parentEl.offsetTop) {
      if ( el.classList.contains('is-active') != true ) {
        el.classList.add('is-active');
      }
      if(window.pageYOffset > PAGE_WITHOUT_BOTTOM) {
        el.classList.remove('is-active');
        el.classList.add('is-bottom');
      }
    } else {
      el.classList.remove('is-active');
    }
  })

PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM - вычисляю высоту контейнера в котором должен "парить" стики-блок и добавляю к высоте 30 пикселей, чтобы блок чуть выходил за пределы контейнера при скроле.

PAGE_WITHOUT_BOTTOM - вычисляю значение высоты страницы при котором стики-блок должен переставать "парить" и интегрировался обратно в страницу.

Сейчас при скролле блок приклеивается, но. Класс is-active не удаляется при скролле до конца страницы.
Класс is-bottom не присваивается :( Стики-блок, соответственно, не отлипает и "парит" при скроле до конца страницы...

Answer 1

[art_y10]

Вроде победил. В первой строчке забыл свойство, в результате чего высота вообще не считалась. + добавил еще проверки наличия классов и их удаления

var PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM = (document.getElementsByClassName("parallax__cont")[0].scrollHeight + 30);
var PAGE_WITHOUT_BOTTOM = (document.body.scrollHeight - PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM);
  var el = document.querySelector('.parallax__back');
  var parentEl = document.querySelector('.parallax__cont');

  window.addEventListener('scroll', function(){
    if(window.pageYOffset > parentEl.offsetTop) {
      if ( el.classList.contains('is-active') != true ) {
        el.classList.add('is-active');
      }
      if(window.pageYOffset > PAGE_WITHOUT_BOTTOM) {
        //console.log(window.pageYOffset);
        //console.log(PAGE_WITHOUT_BOTTOM);
        el.classList.remove('is-active');
        el.classList.add('is-bottom');
      }
    } else {
      if ( el.classList.contains('is-active') == true ) {
        el.classList.remove('is-active');
      }
      if ( el.classList.contains('is-bottom') == true ) {
        el.classList.remove('is-bottom');
      }
    }
    //console.log(PARRALAX_CONTAINER_HEIGHT_AND_BOTTOM);
    //console.log(PAGE_WITHOUT_BOTTOM);
  })
});