1

我正在制作一个简单的网站，它是一个插图画廊，每个页面都尽可能大地显示。页面顶部还有一个固定的标题。

所以这是一系列幻灯片，img每张幻灯片，图像的高度是视口的高度减去标题的高度。它工作得很好，但是当我添加Scrollify时出现问题。

这是情况的简化版本：
https ://thimbleprojects.org/nclm/457411/

如您所见，第一部分在到达时错误地向下滚动。考虑到offset我定义的并与标题很好地对齐，其他部分工作得很好，但 Scrollify 似乎忽略了第一部分的偏移量，因此对齐不正确。

这可能是因为我如何在 CSSmargin-top中使用标题高度的a 来移动页面内容body，但我尝试将其他margin-tops 和padding-tops 应用于不同的部分（body, #slides, .slide:first-of-type），但它们都会导致相同的问题。

我也尝试使用 来制作#slides固定高度overflow: auto，但不知何故 Scrollify 不能应用于整个页面以外的另一个元素（如果我错了，请纠正我）。

我在如何应用 Scrollify 上错了吗？有人可以指出我的方法吗？

万分感谢。

编辑：添加代码段的 Stack Overflow 托管副本：

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

4

0 回答 0