Прокрутка с фиксированным заголовком: смещение не применяется к первому разделу

Я делаю простой веб-сайт, представляющий собой галерею иллюстраций, каждая из которых показана как можно большего размера на одной странице. В верхней части страницы также есть фиксированный заголовок.

Так что это серия слайдов с одним img в каждом высота изображения равна высоте области просмотра минус высота заголовка. Это работает совершенно нормально, но у меня есть проблема, когда я добавляю Scrollify.

Вот упрощенная версия ситуации:
https://thimbleprojects.org/nclm/457411/

Как видите, по прибытии первый раздел по ошибке прокручивается вниз. Остальные разделы работают просто отлично, учитывая offset Я определил и хорошо выровнял с заголовком, но Scrollify, кажется, игнорирует смещение для первого раздела, который поэтому выравнивается неправильно.

Это может быть из-за того, как я перемещаю содержимое страницы в CSS с помощью margin-top высоты жатки на body, но я пробовал другие margin-top с и padding-top применяется к разным частям (body, #slides, .slide:first-of-type), но все они приводят к одной и той же проблеме.

Я тоже пытался сделать #slides фиксированная высота с overflow: auto, но каким-то образом Scrollify нельзя применить к другому элементу, кроме целой страницы (поправьте меня, если я ошибаюсь).

Я ошибаюсь в том, как я применяю Scrollify? Может кто-нибудь укажет мне способ заставить это работать?

Огромное спасибо.

Изменить: добавление размещенной копии стека переполнения фрагмента:

$(function() {
  function convertRemToPixels(rem) {
    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
  }
  var header_height = convertRemToPixels(3)
  $.scrollify({
    section: '.slide',
    interstitialSection: '',
    easing: 'swing',
    scrollSpeed: 800,
    offset: -header_height,
    scrollbars: true,
    standardScrollElements: 'body > header',
    setHeights: false,
    overflowScroll: true,
    updateHash: false,
    touchScroll: true
  })
})
@charset 'utf-8';
@import url(reset.css);

* {
  box-sizing: border-box;
  color: inherit;
}

:root {
  --header-height: 3rem;
  font-size: 20px;
}

body {
  line-height: 1.4rem;
  background: gray;
  /* offset is here for now */
  margin-top: var(--header-height);
}

body>header {
  position: fixed;
  z-index: 100;
  background: white;
  width: 100vw;
  top: 0;
  height: var(--header-height);
}

.slide {
  position: relative;
  overflow: hidden;
}

.slide img,
.slide video {
  display: block;
  width: 100%;
  height: calc(100vh - var(--header-height));
  max-height: 100vw;
  object-fit: cover;
  object-position: top center;
  position: relative;
}

@media (min-aspect-ratio: 2/1) {
  .slide img,
  .slide video {
    height: 50vw;
  }
}
<!doctype html>
<html lang='en'>

<head>
  <meta charset='utf-8'>
  <title>Test</title>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <header>
    Page header
  </header>
  <section id='slides'>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_1.png' alt='Description'>
    </article>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_2.png' alt='Description'>
    </article>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_1.png' alt='Description'>
    </article>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_2.png' alt='Description'>
    </article>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_1.png' alt='Description'>
    </article>
    <article class='slide'>
      <img src='//thimbleprojects.org/nclm/457411/image_2.png' alt='Description'>
    </article>
  </section>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
</body>

</html>

Источник

0 ответов

Другие вопросы по тегам