БЛОГ НА HUSL


"sticky" элемент прилипает только на части страницы

Автор вопроса: И Г О Р Ь

Есть сайт kristy98755.github.io/m.doors (смотреть в мобильном представлении, иначе переадресовывает на полную версию). Должны прилипать элементы .toolbar и .hidden-items, причем hidden-items должен занимать весь экран и прокручиваться только внутри себя (т.е. ниже него не должно листаться). Всё работает как надо, если скрыть .cards-grid, но оно и немудрено. Две недели долблю ChatGPT и документацию, но настало время попросить вас о помощи...

Код сократил до минимума, но так, чтобы не нарушить функциональность, ибо непонятно откуда баг. Содержимое cards-grid любое и обязательно превышает размеры (vmax) объекта .hidden-items как минимум в три раза, при этом из оригинального кода сохранены только position и top.

document.addEventListener('DOMContentLoaded', () => {
  const burger = document.querySelector('.burger');
  const hiddenItems = document.querySelector('.hidden-items');

  burger.addEventListener('click', () => {
    burger.classList.toggle('active');

    if (hiddenItems) { // Проверка на наличие элемента
      hiddenItems.classList.toggle('active');
    }
  });
});
document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".catalog").forEach(function(element) {
    element.addEventListener("click", function() {
      // Тогглируем класс "open" на стрелке
      const arrow = this.querySelector(".arrow");
      if (arrow) {
        arrow.classList.toggle("open");
      }

      // Тогглируем видимость подменю
      const subMenu = this.nextElementSibling; // Подразумевается, что .submenu1 идет сразу после .catalog
      if (subMenu) {
        subMenu.classList.toggle("visible");
      }
    });
  });
});
.zagolovok {
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  width: 100%;
  background: url('https://kristy98755.github.io/startpage/repeatable.png');
  height: auto;
  white-space: nowrap;
  position: relative;
  background-repeat: repeat;
  font-family: 'Palatino Linotype';
  font-size: calc(2vw + 2vh + 5vmax);
  font-weight: bold;
  vertical-align: middle;
  text-shadow: -2px -2px 0 #DDD, 2px -2px 0 #DDD, -2px 2px 0 #DDD, 2px 2px 0 #DDD;
  overflow: hidden;
}


.catalog {
    /* Это просто триггер для нажатия */
    
}


.arrow {
    position: relative;
    cursor: pointer;
    margin: auto 20px;
    width: 66px;
    height: 30px;
}
.arrow-left {
    position: absolute;
    background-color: transparent;
    top: 10px;
    left: 0;
    width: 40px;
    height: 10px;
    display: block;
    transform: rotate(35deg);
    float: right;
    border-radius: 2px;
}
.arrow-left:after {
    content: "";
    background-color: black;
    width: 40px;
    height: 10px;
    display: block;
    float: right;
    border-radius: 6px 10px 10px 6px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
 
.arrow-right {
    position: absolute;
    background-color: transparent;
    top: 10px;
    left: 26px;
    width: 40px;
    height: 10px;
    display: block;
    transform: rotate(-35deg);
    float: right;
    border-radius: 2px;
}
.arrow-right:after {
    content: "";
    background-color: black;
    width: 40px;
    height: 10px;
    display: block;
    float: right;
    border-radius: 10px 6px 6px 10px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
.open .arrow-left:after {
    transform-origin: center center;
    transform: rotate(-70deg);
}
.open .arrow-right:after {
    transform-origin: center center;
    transform: rotate(70deg);
}

.submenu1 {
    display:flex;
    transition: 0.5s ease-out;
    max-height: 0;
    flex-direction: column;
    width: 100%;
    position: relative;
    background-color: #a7a71d;
    z-index: 12;
    border-bottom: 0;
    max-height:0;
    overflow:hidden;

}
.submenu1.visible {
    display: flex;
    transition: 0.5s ease-out;
    max-height: calc((2vw + 2vh + 1vmin + 40px + 3px) * 30);
    flex-direction: column;
    width: 100%;
    position: relative;
    background-color: #a7a71d;
    z-index: 12;
    border-bottom: 1px solid black;
}

.toolbar {
  position: sticky;
  border-top: 2px solid black;
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-between;
  /* Добавлено для размещения элементов */
  align-items: center;
  /* Центрирование по вертикали */
  text-align: center;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: #a7a71d;
  padding: 3px;
  box-sizing: border-box;
  font-size: calc(3vw + 2vh + 1.2vmin);
}

.burger {
  left: 0;
  margin-left: 10px;
  /* Отступ от левого края */
  cursor: pointer;
  width: 60px;
  height: 50px;
  background: transparent;
  border: none;
  position: relative;
  z-index: 99;
}

.burger::before,
.burger::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 10px;
}

.burger::before {
  top: 0;
  box-shadow: 0 22px 0 #000;
  transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}

.burger::after {
  bottom: 0;
  transition: bottom .3s .15s, transform .3s;
}

.burger.active::before {
  top: 22px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
  transition: box-shadow .15s, top .3s, transform .3s .15s;
}

.burger.active::after {
  bottom: 22px;
  transform: rotate(-45deg);
  transition: bottom .3s, transform .3s .15s;
}

.hidden-items {
  position: sticky;
  top: calc(3vw + 2vh + 1.2vmin + 22px);
  overflow-y: scroll;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease, visibility 0.5s ease;
  width: 100%;
  font-size: calc(2vw + 2vh + 1vmin);
  background: #d0d048;
  text-decoration: none;
  display: grid;
  z-index: 8;
}

.hidden-items.active {
  /* max-height: calc(100vh - (3vw + 2vh + 1.2vmin + 22px)); */
  max-height: -webkit-fill-available;
  visibility: visible;
  transform: translateX(0);
}

.plitka {
  color: black;
  text-align: left;
  font-size: calc(2vw + 2vh + 1vmin);
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
  padding: 20px;
  padding-left: 50px;
  position: relative;
  border-bottom: 2px solid black;
  text-decoration: none;
}

.submenu1 {
  display: flex;
  transition: 0.5s ease-out;
  max-height: 0;
  flex-direction: column;
  width: 100%;
  position: relative;
  background-color: #a7a71d;
  z-index: 12;
  border-bottom: 0;
  max-height: 0;
  overflow: hidden;
}

.cards-grid {
  height: 1000vmax;
  background: red;
  width:100vw;
  position:absolute;
  font-size: calc(2vw + 2vh + 5vmax);
  top:calc(2*(3vw + 2vh + 1.2vmin + 22px + 2vw + 2vh + 5vmax));
}
<div class="zagolovok">ИЗДЕЛИЯ<br>ИЗ ДЕРЕВА</div>
    <div class="toolbar" align="center">
    <button class="burger"></button>
    <font style="display:block; position=absolute; margin-left:auto;margin-right:auto;">
ДВЕРИ</font>
    <font style="width:70px;height:50px;"> </font>
    </div>
<div class="hidden-items">
        <div class="plitka">ГЛАВНАЯ</div>
        <div class="plitka"><a href="#">ПОИСК</a></div>
        <div class="plitka catalog">        
        КАТАЛОГ
        
            <div class="arrow">
                <span class="arrow-left"></span>
                <span class="arrow-right"></span>
            </div>
        </div>
        <div class="submenu1">
            <div class="plitka active">Двери</div>
            <div class="plitka">Рамы</div>
            <div class="plitka">Лестницы</div>
            <div class="plitka">Столы</div>
            <div class="plitka">Лавки</div>
            <div class="plitka">Стулья</div>
            <div class="plitka catalog">Погонаж
            
                <div class="arrow">
                    <span class="arrow-left"></span>
                    <span class="arrow-right"></span>
                </div>
            </div>
                <div class="submenu1" style="background-color: #777700">
                    <div class="plitka" style="border-top:1px solid black;">Блок-хаус</div>
                    <div class="plitka">Вагонка</div>
                    <div class="plitka">Половая доска</div>
                    <div class="plitka">Плинтус</div>
                    <div class="plitka">Наличник</div>
                    <div class="plitka">Имитация бруса</div>
                    <div class="plitka">Планкен</div>
                    <div class="plitka">Щиты 40 мм</div>
                </div>
            
            <div class="plitka catalog">Для бань и саун
                <div class="arrow">
                    <span class="arrow-left"></span>
                    <span class="arrow-right"></span>
                </div>
            </div>
            <div class="submenu1" style="background-color: #777700">
                <div class="plitka" style="border-top:1px solid black;">Ковши</div>
                <div class="plitka">Трапы</div>
                <div class="plitka">Светильники</div>
                <div class="plitka">Шезлонги</div>
                <div class="plitka">Гималайская соль</div>
                <div class="plitka">Подголовники</div>
                <div class="plitka">Кружки</div>
                <div class="plitka">Вёдра-обливайки</div>
            </div>
        </div>
        <div class="plitka">АДРЕС</div>
        <div class="plitka">КОНТАКТЫ</div>

    </div>
    <div class="cards-grid">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

Просьба не осуждать за кашу в calc, пусть остается.


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.