- 18, May 2024
- #1
Всем привет,
У меня возникла небольшая проблема.
У меня есть скрипт для вложенных модальных окон, который при нажатии на ссылку переходит прямо к привязке.
Он работает нормально.
Однако при стилизации я хотел бы иметь фиксированный заголовок, поскольку div «.content» прокручивается до привязки.
Когда «.content» имеет высоту 80vh, это выглядит нормально, но скрипт не прокручивается до привязки.
Когда «.content» имеет высоту 80%, скрипт работает, но фиксированный заголовок не остается фиксированным и прокручивается вместе с «.content».
Как я могу заставить скрипт работать, но сохранять фиксированный заголовок.
Спасибо
СКРИПКА
HTML
Код (разметка): JS
Код (разметка):
CSS
Код (разметка):
Он работает нормально.
Однако при стилизации я хотел бы иметь фиксированный заголовок, поскольку div «.content» прокручивается до привязки.
Когда «.content» имеет высоту 80vh, это выглядит нормально, но скрипт не прокручивается до привязки.
Когда «.content» имеет высоту 80%, скрипт работает, но фиксированный заголовок не остается фиксированным и прокручивается вместе с «.content».
Как я могу заставить скрипт работать, но сохранять фиксированный заголовок.
Спасибо
СКРИПКА
HTML
.modal { box-sizing: border-box; display: none; position: fixed; z-index: 1; padding-top: 3.125rem; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; transition: all 1.0s ease; }
/* The Close Button */
.close { z-index: 1000; font-size: 3vw; float: right; transition: all 0.3s ease; }
/* Modal Content */
header, .content { width: 60%; margin: auto; }
.content { height: 80%; padding-top: 3%; padding-bottom: 3%; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto; flex: 1 1 auto; overflow: auto; min-height: 0; font-size: 2vw; }
Код (разметка): JS
//popup nest modals $(function() { const openModals = []; $('.element-item').click(e => { e.preventDefault(); $(e.currentTarget).closest('.modal').add('body').addClass('open'); openModals.push($($(e.currentTarget).attr('href')).show()); }); $(window).add('.close').click(e => { e.stopPropagation(); if ($(e.target).is('.modal, .close')) { const closing = openModals.pop().addClass('modal-content-active'); setTimeout(() => { closing.hide().removeClass('modal-content-active') }, 0); if (openModals.length > 0) { openModals[openModals.length - 1].removeClass('open'); } else $('body').removeClass('open'); } }); }); //jump to anchor in modal $('.huijnen').on('click', function(e) { requestAnimationFrame(() => $('#contributors').animate({ scrollTop: $('#huijnen').offset().top - 40 }, 500)) }); $('.bailey').on('click', function() { requestAnimationFrame(() => $('#contributors').animate({ scrollTop: $('#bailey').offset().top - 40 }, 500)) });Код (разметка):
CSS
<a href="#contributors" class="element-item bailey">Bailey</a> <a href="#contributors" class="element-item huijnen">Huijnen</a> <div id="contributors" class="modal"> <div class="modal-container"> <header><span class="close">×</span> <h2>Contributors</h2> </header> <div class="content"> <section> <article> <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line <div class="item" id="huijnen"> <h4>Huijnen</h4> </div> <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line <div class="item" id="bailey"> <h4>Bailey</h4> </div> <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line </article> </section> </div> </div> </div>Код (разметка):
![[www.traf-masters.ru] Самый Мощный Курс По Прибыльному Арбитражу Трафика!](/assets/images/icons/forum7.png){kind=icon}
![[Muse] 308 виджетов, инструментов и шаблонов для Adobe Muse](/assets/images/icons/forum1.png){kind=icon}
