Как сделать скролл части секции?
Есть секция
*** большая картинка удалена *** Правый блок фиксированный, а левый должен прокручиваться в верх. На текущий момент с помощью CSS я сделал так, что левый прокручивается, но если курсор находится непосредственно над ним. А нужно, чтобы когда пользователь доходил до этой секции скролл самого сайта останавливался и при прокрутке колесика, стрелок на клавиатуре или сенсорного акрана на гаджетах в любом месте секции прокручивалась только левая колонка. А когда она выйдет вся, то вновь возобновлялся скролл самого сайта и пользователь спускался к следующей секции. И в обратном направлении (снизу вверх) аналогично все происходило. Как это можно реализовать на чистом js без плагинов? |
<!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> |
Закинул код на кодпен, но получается, что оба блока двигаются, а не только левый. Правый ведь должен быть статичным.
|
|
все там нормально получается
|
<!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> |
Подправил немного код под себя. Обошлось вообще без js.
https://codepen.io/Viacheslav_Demchenko/pen/YzPpQoK Но почему-то после реализации аналогичного кода в своем проекте, он не работает, а на кодпене все отлично. Что за антимагия такая? https://viacheslavdemchenko.github.io/blackcode/ |
<style> .advantages-wrap { ... height: 1000px; } </style> в общем, высота блока растянулась больше, чем viewport окна браузера ) |
Ураа! Все получилось. Ему не нравилось, что в body стоит overflow-x: hidden
|
Часовой пояс GMT +3, время: 22:51. |