Подскажите пожалуйста, при скролл контента в бургер меню, иконка становится position sticky и движется вместе с контентом, но при скроле она должна поменять цвет. Вопрос, как можно отловить скролл в самом меню? все что я пишу при скролле применяется к главному экрану, но там скролл должен быть заблокирован при открытии меню. Спасибо
https://jsfiddle.net/z21ua8bk/90/
let bodyMenu = document.querySelector(".menu__body");
let iconMenu = document.querySelector(".icon-menu");
let body = document.querySelector(".body");
function menuInit() {
if (iconMenu) {
iconMenu.addEventListener("click", function(e) {
body.classList.toggle('lock');
bodyMenu.classList.toggle("menu-open");
});
};
}
menuInit();
window.addEventListener("resize", menuInit);
let menuIcons = document.querySelector(".menu-icons");
window.addEventListener("scroll", function (e) {
const scrollTop = window.scrollY;
if (scrollTop > 1) {
menuIcons.classList.add("_scroll")
};
});
.menu-icons {
display: block;
width: 18px;
height: 15px;
position: sticky;
top: 0;
}
.menu-icons.menu-open {
height: 44px;
z-index: 115;
position: absolute;
left: 0;
display: flex;
background-color: #ffffff;
width: 100%;
}
.menu-icons._scroll {
border-bottom: 1px solid #ebe6e1;
}
.icon-menu {
display: block;
position: relative;
width: 28px;
height: 18px;
cursor: pointer;
z-index: 115;
margin: 0px 12px 0px 0px;
}
.icon-menu span {
transition: all 0.3s ease 0s;
right: 0;
position: absolute;
width: 100%;
height: 2px;
background-color: #111111;
top: calc(50% - rem(1));
}
.icon-menu::before {
content: "";
transition: all 0.3s ease 0s;
right: 0;
position: absolute;
width: 100%;
height: 2px;
background-color: #111111;
top: 0;
}
.icon-menu::after {
content: "";
bottom: 0;
transition: all 0.3s ease 0s;
right: 0;
position: absolute;
width: 100%;
height: 2px;
background-color: #111111;
}
.icon-menu .menu-open {
position: absolute;
top: 16px;
left: 16px;
}
.icon-menu .menu-open span {
width: 0;
height: 1px;
background-color: #887569;
}
.icon-menu .menu-open::before {
content: "";
height: 1px;
background-color: #887569;
top: calc(50%);
transform: rotate(-45deg);
}
.icon-menu .menu-open::after {
content: "";
height: 1px;
background-color: #887569;
bottom: calc(50% - 1px);
transform: rotate(45deg);
}
.menu__body {
position: fixed;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
left: -100%;
padding: 0px 0px 0px 0px;
background: #ffffff;
transition: left 0.5s ease 0s;
z-index: 110;
padding: 44px 0px 24px 0px;
}
.menu__body.menu-open {
left: 0;
}
.body .lock {
overflow: hidden;
}
<html>
<body class="body">
<div class="header__menu menu">
<div class="menu__icons">
<button type="button" class="menu__icon icon-menu"><span></span></button>
</div>
<div class="menu__search-icon-mob _icon-search"></div>
<div class="menu__body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ipsum dicta iusto recusandae reprehenderit iste provident possimus qui minus aperiam, sequi vitae animi laborum impedit doloribus sint rerum corrupti ea? At, accusamus impedit! Eaque ad vitae ipsa ea cum repellat placeat exercitationem consequatur, quae at! Repellendus perspiciatis nihil perferendis? Dolorem accusantium porro tenetur dicta similique perferendis, aliquam error reprehenderit ab ipsam reiciendis adipisci fuga inventore distinctio ad velit, aperiam assumenda cum. Vero dolores tenetur optio illo vitae et doloremque id quo iste sit itaque praesentium rem magni maiores voluptas obcaecati at perferendis, animi distinctio quibusdam? Eveniet incidunt rerum delectus vel vitae fugit, enim sint! Dolorem quaerat, eaque ex odio odit quasi impedit ullam aut porro hic voluptas tempora velit laboriosam ea in suscipit, ut iure doloremque adipisci. Minima, sint consectetur. Nobis quod quos ipsam maiores delectus facere eius, perferendis totam ipsa maxime dicta voluptas exercitationem, minus vel hic reprehenderit, culpa voluptatibus. Repellat modi aspernatur sint omnis! Quidem pariatur excepturi voluptas, numquam est similique placeat assumenda, reiciendis ut et officiis debitis ratione officia fugit sint, repudiandae temporibus rerum qui voluptatem sapiente tempora consequatur dolorum. Voluptates tempora quia nulla odit tempore nam, recusandae soluta hic, dicta architecto, impedit quaerat voluptatibus dolorem similique dolorum alias! Ipsum esse tempore qui non voluptate alias, quod magni tenetur autem. Autem inventore quia, eligendi quae praesentium vero dolore repellendus placeat iure, temporibus eius cumque vel! Id aliquid laudantium nemo dolorem voluptas enim voluptates suscipit excepturi sapiente qui minus quod nihil quisquam, dolores vero? Modi, praesentium, reprehenderit pariatur ratione eum est maxime amet nihil facere aliquam veritatis aliquid molestias vel corporis, aperiam perspiciatis. Amet, quibusdam tenetur tempora eum praesentium sed, asperiores accusamus sit itaque placeat quidem vel enim ab aut. Laudantium culpa impedit distinctio libero maiores voluptatibus. Suscipit vel nobis non laudantium eum doloribus eos eius eveniet omnis, nulla ad rem facere quis sequi harum, earum illum aliquid totam odio saepe mollitia aspernatur, voluptate qui fuga! Aut eveniet error nemo dicta accusantium eius enim. Autem dolor vel magnam modi voluptatum deserunt cupiditate fugiat vitae architecto consequuntur illo impedit error ipsum dicta beatae tempora cumque ab voluptatibus voluptas amet non, molestias animi blanditiis repellendus. Fugit, aperiam eaque consectetur optio quasi quibusdam ullam quia cumque molestias delectus maxime iure exercitationem repellendus. Quod nesciunt tempore repellat adipisci similique tempora quisquam amet asperiores, eos quo alias explicabo beatae unde voluptatum itaque distinctio exercitationem accusamus. Voluptates facere quas aliquam nemo, rem corporis consequatur explicabo blanditiis pariatur impedit quis ipsam maxime illo dolorum vel repellendus obcaecati vitae odit incidunt asperiores. Consectetur et excepturi ut ipsum magnam amet illum animi, qui deserunt reiciendis. Ipsum autem mollitia adipisci ex alias ipsam pariatur, commodi, vero possimus vitae aliquid voluptatum veritatis minima? Consequatur quae optio aliquid repellat accusantium? Nostrum blanditiis fugiat error voluptate molestiae at nemo in ducimus ad dolor, quidem, corrupti commodi cupiditate voluptatibus quisquam est reprehenderit placeat alias eaque inventore suscipit ullam omnis rem aut? Amet quibusdam cupiditate enim odio, eveniet similique culpa ex, deleniti eum
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ipsum dicta iusto recusandae reprehenderit iste provident possimus qui minus aperiam, sequi vitae animi laborum impedit doloribus sint rerum corrupti ea? At, accusamus impedit! Eaque ad vitae ipsa ea cum repellat placeat exercitationem consequatur, quae at! Repellendus perspiciatis nihil perferendis? Dolorem accusantium porro tenetur dicta similique perferendis, aliquam error reprehenderit ab ipsam reiciendis adipisci fuga inventore distinctio ad velit, aperiam assumenda cum. Vero dolores tenetur optio illo vitae et doloremque id quo iste sit itaque praesentium rem magni maiores voluptas obcaecati at perferendis, animi distinctio quibusdam? Eveniet incidunt rerum delectus vel vitae fugit, enim sint! Dolorem quaerat, eaque ex odio odit quasi impedit ullam aut porro hic voluptas tempora velit laboriosam ea in suscipit, ut iure doloremque adipisci. Minima, sint consectetur. Nobis quod quos ipsam maiores delectus facere eius, perferendis totam ipsa maxime dicta voluptas exercitationem, minus vel hic reprehenderit, culpa voluptatibus. Repellat modi aspernatur sint omnis! Quidem pariatur excepturi voluptas, numquam est similique placeat assumenda, reiciendis ut et officiis debitis ratione officia fugit sint, repudiandae temporibus rerum qui voluptatem sapiente tempora consequatur dolorum. Voluptates tempora quia nulla odit tempore nam, recusandae soluta hic, dicta architecto, impedit quaerat voluptatibus dolorem similique dolorum alias! Ipsum esse tempore qui non voluptate alias, quod magni tenetur autem. Autem inventore quia, eligendi quae praesentium vero dolore repellendus placeat iure, temporibus eius cumque vel! Id aliquid laudantium nemo dolorem voluptas enim voluptates suscipit excepturi sapiente qui minus quod nihil quisquam, dolores vero? Modi, praesentium, reprehenderit pariatur ratione eum est maxime amet nihil facere aliquam veritatis aliquid molestias vel corporis, aperiam perspiciatis. Amet, quibusdam tenetur tempora eum praesentium sed, asperiores accusamus sit itaque placeat quidem vel enim ab aut. Laudantium culpa impedit distinctio libero maiores voluptatibus. Suscipit vel nobis non laudantium eum doloribus eos eius eveniet omnis, nulla ad rem facere quis sequi harum, earum illum aliquid totam odio saepe mollitia aspernatur, voluptate qui fuga! Aut eveniet error nemo dicta accusantium eius enim. Autem dolor vel magnam modi voluptatum deserunt cupiditate fugiat vitae architecto consequuntur illo impedit error ipsum dicta beatae tempora cumque ab voluptatibus voluptas amet non, molestias animi blanditiis repellendus. Fugit, aperiam eaque consectetur optio quasi quibusdam ullam quia cumque molestias delectus maxime iure exercitationem repellendus. Quod nesciunt tempore repellat adipisci similique tempora quisquam amet asperiores, eos quo alias explicabo beatae unde voluptatum itaque distinctio exercitationem accusamus. Voluptates facere quas aliquam nemo, rem corporis consequatur explicabo blanditiis pariatur impedit quis ipsam maxime illo dolorum vel repellendus obcaecati vitae odit incidunt asperiores. Consectetur et excepturi ut ipsum magnam amet illum animi, qui deserunt reiciendis. Ipsum autem mollitia adipisci ex alias ipsam pariatur, commodi, vero possimus vitae aliquid voluptatum veritatis minima? Consequatur quae optio aliquid repellat accusantium? Nostrum blanditiis fugiat error voluptate molestiae at nemo in ducimus ad dolor, quidem, corrupti commodi cupiditate voluptatibus quisquam est reprehenderit placeat alias eaque inventore suscipit ullam omnis rem aut? Amet quibusdam cupiditate enim odio, eveniet similique culpa ex, deleniti eum
</div>
</body>
</html>