Выход статик-элемента чуть за пределы контейнера снизу при скролле. Как реализовать на jquery или javascript?

Question

[art_y10]

Есть родительский блок-контейнер. Внутри него есть дочерний блок-элемент (могут быть и другие дочерние блоки в контейнере-родителе). Родитель имеет позицию relative, дочерний элемент имеет позицию absolute и отступ сверху (top). Другие дочерние элементы будут иметь позицию relative скорее всего (для задавания z-index, чтобы опысаный выше дочерний элемент скролился под ними (как водяной знак). Как сделать, чтобы при скролле дочерний элемент отрывался от изначальной позиции (top - то есть страница скролилась, а элемент "висел" неподвижно ), а когда выходил за пределы контейнера на несколько позиций rem, прилипал к странице и скроллился вместе с ней... При скролле обратно (снизу вверх) опять сначала скроллился вместе со страницей, а потом отрывался и висел неподвижно пока страница скроллиться, пока не достигнет своего изначального положения в стилях ( top), после чего "интегрировался" обратно в страницу. З.Ы. Контейнер без заданной высоты "растягивается" в зависимости от содержимого.

<div class="scontainer">
  <div class="sticky_child"><img src="" alt=""></div> <!-- этот элемент "отрывается" и "приклеивается" при скролле -->
  <div class="somechild"></div>
  <div class="somechild"></div>
</div>

Comments

[FeST1VaL]

ничего не понятно))) сделайте иллюстрации какие нить))

[art_y10]

Артем Будин,



черный - контейнер
оранжквый овал - "отрывающийся и приклеивающися блок" (вверху начальное положение, внизу - после которого должен переставать летать и интегрироваться в страницу (выходит за пределы контейнера)
синий и орандевый - дочерние этого же контейнера
фиолеторый - страница (может быть длииинная "колбаса")

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);
  })
});