我正在创建一个简单的网站,这是一个插图库,每个都显示为一个页面。页面顶部还有一个固定的标题。
所以它是一系列幻灯片,每个幻灯片中有一个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;
}
}