Форум

DVV · #1 (**permalink**) 16.12.2019, 21:40

Есть секция

*** большая картинка удалена ***

Правый блок фиксированный, а левый должен прокручиваться в верх. На текущий момент с помощью CSS я сделал так, что левый прокручивается, но если курсор находится непосредственно над ним.

А нужно, чтобы когда пользователь доходил до этой секции скролл самого сайта останавливался и при прокрутке колесика, стрелок на клавиатуре или сенсорного акрана на гаджетах в любом месте секции прокручивалась только левая колонка.

А когда она выйдет вся, то вновь возобновлялся скролл самого сайта и пользователь спускался к следующей секции. И в обратном направлении (снизу вверх) аналогично все происходило. Как это можно реализовать на чистом js без плагинов?

SuperZen · #2 (**permalink**) 16.12.2019, 22:38

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .right-item,
    .left-item {
      position: sticky;
      top: 0px;
      display: grid;
      height: 500px;
      align-items: center;
      justify-items: center;
      margin: 1em;
      font-size: 4em;
      border: 1em solid lightcoral;
    }

    .left-item {
      background-color: lightgray;
    }

    .right-item {
      background-color: darkgray;
    }
  </style>
</head>

<body>
  <div class="container"></div>
</body>
<script>
  const text = [['Super', 'Zen'], ['Zen', 'Super']]

  const containerEl = document.querySelector('.container')

  containerEl.innerHTML = text.map(([item1, item2]) => {
    return `<div class="items">
        <div class="left-items">
          ${[...item1].map(i => `<div class="left-item">${i}</div>`).join('')}
        </div>
        <div class="right-items">
          ${[...item2].map(i => `<div class="right-item">${i}</div>`).join('')}
        </div>
      </div>`
  }).join('')
</script>

</html>

DVV · #3 (**permalink**) 16.12.2019, 23:01

Закинул код на кодпен, но получается, что оба блока двигаются, а не только левый. Правый ведь должен быть статичным.

DVV · #4 (**permalink**) 16.12.2019, 23:02

https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK

SuperZen · #5 (**permalink**) 17.12.2019, 07:08

все там нормально получается

SuperZen · #6 (**permalink**) 17.12.2019, 07:51

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      box-sizing: border-box;
    }

    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .small-item,
    .big-item {
      position: sticky;
      top: 0px;
      display: grid;
      align-items: center;
      justify-items: center;
    }

    .small-item {
      height: 400px;
      background-color: lightgray;
      background-image: url(https://3.bp.blogspot.com/-FUOSuBucarc/XEz-XlUQgXI/AAAAAAAAHis/hQjomTjplZ8_NeRU_weB2uFqwohp-HM1wCHMYCw/s1600/free-computer-wallpapers-for-download-in-hd-for-desktops-and-laptops.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .big-item {
      height: 1200px;
      background-color: darkgray;
      background-image: url(https://3.bp.blogspot.com/-4KGx9OZWtE4/XEz-XV8KQuI/AAAAAAAAHio/rCnsBjlhoYA4ggL-m-3mBj2ZBDWg9_YaACHMYCw/s1600/download-the-all-new-iphone-xr-bubble-wallpapers-here-ultralinx.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    .position-relative {
      position: relative;
    }

    .sepia {
      filter: sepia(1);
    }

    .saturate {
      filter: saturate(64);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="items">
      <div class="left-items">
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item saturate"></div>
        <div class="big-item"></div>
      </div>
      <div class="right-items">
        <div class="big-item"></div>
        <div class="small-item position-relative sepia"></div>
        <div class="small-item position-relative"></div>
        <div class="small-item position-relative"></div>
        <div class="big-item position-relative"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
        <div class="small-item"></div>
      </div>
    </div>
  </div>
</body>

<script>

  const bigItems = document.querySelectorAll('.big-item')
  const { scrollHeight } = document.querySelector('body')
  window.addEventListener('scroll', e => {
    const { scrollY, innerHeight } = window
    const sepia = scrollY / (scrollHeight - innerHeight);
    bigItems.forEach(bigItem => bigItem.style.filter = `sepia(${sepia})`)
  })

</script>

</html>

DVV · #7 (**permalink**) 17.12.2019, 21:21

Подправил немного код под себя. Обошлось вообще без js.
https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK

Но почему-то после реализации аналогичного кода в своем проекте, он не работает, а на кодпене все отлично. Что за антимагия такая?
https://viacheslavdemchenko.github.io/blackcode/

SuperZen · #8 (**permalink**) 17.12.2019, 21:49

<style>
.advantages-wrap {
  ...
  height: 1000px;
}
</style>

в общем, высота блока растянулась больше, чем viewport окна браузера )

DVV · #9 (**permalink**) 17.12.2019, 22:57

Ураа! Все получилось. Ему не нравилось, что в body стоит overflow-x: hidden

Форум

Справочник

Discord чат

Курсы javascript