Question

我正在创建一个简单的网站，这是一个插图库，每个都显示为一个页面。页面顶部还有一个固定的标题。

所以它是一系列幻灯片，每个幻灯片中有一个img，图像的高度是视口的高度减去标题的高度。它工作得很好，但是当我添加Scrollify时我遇到了问题。

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

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

可能是因为我在margin-top中使用body的标题高度移动了CSS中的页面内容，但我尝试了其他margin-top和{{1已应用于不同的部分（padding-top，body，#slides），但它们都会导致同样的问题。

我还试图用.slide:first-of-type使#slides成为一个固定的高度，但不知道Scrollify不能应用于除整个页面之外的其他元素（如果我错了，请纠正我）。

我申请Scrollify的方式有误吗？有人能指出我的方法来使这个工作吗？

万分感谢。

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

overflow: auto

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

使用固定标题滚动：偏移未应用于第一部分

0 个答案: