Scrollify with fixed header: offset not applied to first section

Question

I'm making a simple website which is a gallery of illustrations, each shown as large as possible one the page. There is also a fixed header staying on top of the page.

So it's a series of slides with one img in each, the images' height being the height of the viewport minus the height of the header. It's working completely fine, but I have an issue when I add Scrollify.

Here is a simpliflied version of the situation:
https://thimbleprojects.org/nclm/457411/

As you can see, the first section is mistakenly scrolled down on arrival. The others sections work just fine, taking into account the offset I defined and aligning nicely with the header, but Scrollify seems to ignore the offset for the first section, which therefore aligns incorrectly.

It might be because of how I shift the page content in the CSS with a margin-top of the header height on the body, but I tried other margin-tops and padding-tops applied to different parts (body, #slides, .slide:first-of-type), but they all lead to the same issue.

I also tried to make #slides a fixed height with overflow: auto, but somehow Scrollify can't be applied to another element than the whole page (correct me if I'm wrong).

Am I wrong in how I apply Scrollify? Can someone points me to a way to make this working?

A thousand thanks.

Edit: Adding a Stack Overflow hosted copy of the snippet:

$(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>

Scrollify with fixed header: offset not applied to first section

0 Answers0