Ответы пользователя по тегу CSS
  • Как сделать такое на css?

    @art_y10
    Контейнеру карточе ширину в 100%; display: flex. Карточкам ширину в процентах по вкусу, некоторым можно с использованием calc вычислить + медиазапросы - вот вам адаптивный блок.
    Ответ написан
    Комментировать
  • Выход статик-элемента чуть за пределы контейнера снизу при скролле. Как реализовать на jquery или javascript?

    @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);
      })
    });
    Ответ написан
    Комментировать