Question

我在响应式网站（bootstrap 3）中使用skrollr来移动div背景并淡入一些图像。我知道skrollr正在激活，因为它正在改变我试图淡入的图像的不透明度。如果我向下滚动页面并调整窗口大小，背景将会卡入到位。

这是网站： http://www.healthinsurancehosting.com/dev/example/#/ceo_letter/

我在页面加载时刷新了skrollr

s = skrollr.init({ forceHeight: false });           
s.refresh();

html：

<div class="secHead" id="secMain-3"  data-center="background-position: 50% 0;" data-bottom-top="background-position: 50% 100px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#secMain-3">

css：

#wrap {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
margin: 0;
padding: 0;
display: block;
z-index: 0;
}

.secMain {
display:                none;
position:               absolute;
top:                    0;
width:                  100%;
height:                 100%;
border:                 0;
margin:                 0;
padding:                0;
clear:                  both;
z-index:                10;
overflow:               hidden;

overflow-y:             scroll;
-webkit-overflow-scrolling: touch;

}

Answer 1

其中一个关键帧缺少一个匹配另一个

的单位

前

data-center="background-position: 50% 0;"

后

data-center="background-position: 50% 0px;"

但这不是问题。你不是滚动身体（overflow:hidden），而是滚动不同的部分。 Skrollr仅检查正文的滚动位置（向下滚动一下并在控制台中执行skrollr.get().getScrollTop()。它总是0）

Skrollr被触发但不是动画

1 个答案: