Как сделать такой комплекс эффектов для блока?

Question

[Unknown]

Привет!
Пытаюсь сделать вот такой эффект блока во время скролла страницы.

Ссылка здесь, мотайте вниз.
Для слайдера подключил плагин slick.js, написал не большую функцию чтобы слайдер работал при скролле блока #owlZone.
Теперь пытаюсь поймать координаты блока и сделать автоскроллинг до якоря в блоке, когда прокрутка страницы > чем половина от этого блока.
Поймать координаты блока пытаюсь путем вычисления, один пользователь подсказал мне сделать так . Но такой способ работает только если скролить от начала страницы. Такое решение для моей задачи не подходит, так как пользователь будет скролить и вверх и вниз или вовсе обновит страницу где-нибудь на середине. Поэтому нужно универсальное решение.
Код

//slick js

// scroll 
	var zone    = document.getElementById('owlZone'),
			slickJs = $('.toushbrush-slider');
			zoneCoords = zone.getBoundingClientRect();

	document.addEventListener('scroll', function(event) {
		var x = zoneCoords.top;
		var y = pageYOffset;
		var z = window.innerHeight;
??? Здесь должно что-то быть ???

// slick whell slide
	zone.addEventListener('wheel', function(event) {
		var currentSlider = slickJs.slick('slickCurrentSlide');

		if (event.deltaY > 0) {
			slickJs.slick('slickNext');
		} else {
			slickJs.slick('slickPrev');
		}

	}, false);

// init slick
	$('.toushbrush-slider').slick({
		vertical: true,
		infinite: false

	});

Comments

[Никита Кит]

wheel тебе не поможет. Тебе нужен scroll. Разделить scroll на две ветки условия. Скролл вниз и скролл вверх (достаточно просто - инициализируй вне колбэка события переменную с нолём и меняй её в конце коллбэка. Так ты будешь знать последний пиксель прокрутки. Сравнивай его с $(window).offset().top и узнавай куда крутит юзер. Дальше в эти 2 условия нужно заложить алгоритм параллакса. Слайдер тут... ну я бы без него делал. На примере нет слайдера. Там чистый скролл, в пропорции которого меняются абсолютные координаты щётки и мобилы и его прозрачность

[Никита Кит]

ЗЫ я не написал это в ответ, потому что твой вопрос в стиле "напиши за меня" - писать за тебя я, естественно не буду. Я лишь дал тебе подсказку.

[Никита Кит]

Да, кстати, это я тебе только про мобилку. Щётку нужно сделать sticky. Многие ставят тяжеловесные полифиллы, основанные на jquery clone, я написал свой.

header = ->
  $ = require "jquery"
  moduleName = 'header'
  sticker = $ ".#{moduleName}__sticker"
  stickOffset = $ ".#{moduleName}__sticker-offset"
  stickerOffsetStatic = sticker.offset().top
  console.log stickerOffsetStatic
  $(window).scroll(
    ->
      if $(window).scrollTop() > stickerOffsetStatic
        sticker.addClass "#{moduleName}__sticker--sticky"
        stickOffset.addClass "#{moduleName}__sticker-offset--active"
      else
        sticker.removeClass "#{moduleName}__sticker--sticky"
        stickOffset.removeClass "#{moduleName}__sticker-offset--active"
  )

.header__sticker-offset.header__sticker-offset--md
.header
  //блоки в header, которые скроллятся
  .header__sticker
   //прилипающие блоки

.header{
  width: 100%;
  background-color: #191919;
  position: relative;
  z-index: 10;
&__sticker-offset{
    width: 100%;
    height: 0;
    &--active{
      height: 60px;
    }
  }
  &__sticker{
    min-height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    background-color: #191919;
    transition: 0.15s ease-in;
    &--sticky{
      background-color: #292929;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }
  }
  &__offset{
    height: 60px;
  }