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

时间:2018-04-12 12:28:03

标签: javascript jquery-plugins jquery-scrollify

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

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

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

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

可能是因为我在margin-top中使用body的标题高度移动了CSS中的页面内容,但我尝试了其他margin-top和{{1已应用于不同的部分(padding-topbody#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 个答案:

没有答案