• Абсолютно позиционированный блок внутри overflow: auto?

    .nav {
      background: #f00;
      width: 200px;
      height: 150px;
      overflow-y: scroll;
    }
    .subnav {
      background: #00f;
      position: absolute;
      left: 200px;
      top: 16px;
      width: 200px;
    }


    Не уверен из-за чего возникает эта проблема, но что-бы её избежать нужно позиционировать блок не относительно nav, а eё обёртки, таким образом overflow не будет действовать на абсолютный блок
    Ответ написан
    Комментировать
  • Сделать анимацию текста при скролле по странице?

    const animItems = document.querySelectorAll(`._anim-items`)
    if (animItems.length > 0) {
        window.addEventListener(`scroll`, animOnScroll)
    
        function animOnScroll() {
            for (let index = 0; index < animItems.length; index++) {
                const animItem = animItems[index]
                const animItemHeight = animItem.offsetHeight
                const animItemOffSet = offset(animItem).top
                const animStart = 4
                let animItemPoint = window.innerHeight - animItemHeight / animStart
                if (animItemHeight > window.innerHeight) {
                    animItemPoint = window.innerHeight - window.innerHeight / animStart
                }
                if ((pageYOffset > animItemOffSet - animItemPoint) && pageYOffset < (animItemOffSet + animItemHeight)) {
                    animItem.classList.add(`_active`)
                } else {
                    if (!(animItem.classList.contains(`_anim-no-hide`))) {
                        animItem.classList.remove(`_active`)
                    }
                }
            }
        }
    
        function offset(el) {
            const rect = el.getBoundingClientRect()
            let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop
            return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
        }
    
        setTimeout(() => {
            animOnScroll()
        }, 300)
    }


    для срабатывания анимации добавляешь класс _anim-items ( + _anim-no-hide если не нужна анимция при повторной прокрутке) , a в css добавляешь саму анимацию
    .header {
      transform: translate(0, -80%);
      opacity: 0.5;
      transition: all 1s ease 0s;
    }
    .header._active {
      transform: translate(0, 0);
      opacity: 1;
    }


    Пример можно посмотреть здесь: https://github.com/GleckoS/Studio-Urody-An-In
    Ответ написан
    Комментировать