Блог

У меня проблема с моим липким компонентом, использующим фреймворк Foundation Zurb css.

Вот мой html:

 lt;main class='y mandatory-scroll-snapping'gt;  lt;section class='padding-vertical-3'gt;  lt;div class='grid-x'gt;  lt;div class='cell medium-6 large-6 right' data-sticky-container=''gt;  lt;div class='sticky' data-anchor='content' data-margin-top='0' data-sticky=''gt;  lt;img class='thumbnail' src='https://via.placeholder.com/150'gt;  lt;/divgt;  lt;/divgt;  lt;div class='cell medium-6 large-6' id='content'gt;  lt;h1gt;Header 1lt;/h1gt;  lt;h2gt;Header 2lt;/h2gt;  lt;h3gt;Header 3lt;/h3gt;  lt;h4gt;Header 4lt;/h4gt;  lt;h5gt;Header 5lt;/h5gt;  lt;h6gt;Header 6lt;/h6gt;  lt;/divgt;  lt;/divgt;  lt;/sectiongt;  lt;section class='padding-vertical-3'gt;  lt;h1gt;Header 1lt;/h1gt;  lt;h2gt;Header 2lt;/h2gt;  lt;h3gt;Header 3lt;/h3gt;  lt;h4gt;Header 4lt;/h4gt;  lt;h5gt;Header 5lt;/h5gt;  lt;h6gt;Header 6lt;/h6gt;  lt;/sectiongt; lt;/maingt;  

Вот мой css:

 main {  display: flex;  overflow: auto; }  main.y {  width: 100%;  max-height: 100vh;  flex-flow: column nowrap; }  .y.mandatory-scroll-snapping {  scroll-snap-type: y mandatory; }  main gt; section {  scroll-snap-align: start;  flex: none; }  .y gt; section {  width: 100%;  height: 100%; }  

Моя главная проблема здесь в коде: max-height: 100vh; в моем main.y .

Если я удалю max-height: 100vh; липкий компонент, он сработает, но привязка прокрутки больше не работает.

Как только я снова использовал max-height: 100vh; липкий, он больше не работает, но привязка прокрутки работает правильно.

Кто-нибудь может мне помочь, пожалуйста. Заранее спасибо.