Question

我的网站存在问题。我使用Skrollr在此图像上显示一个图像和一个文本。文本淡出，图像有一些很好的效果。首先我使用Foundations作为框架，但这对我不起作用。所以我切换到Bootstrap。现在我的问题是我的身高设置为2157px。我不知道为什么，但在没有Skrollr的网页上，这并不会发生。对我来说，似乎Skrollr就是问题所在。我使用了以下代码：

<section id="slide-1" class="homeSlide">
    <div class="bcg"
        data-0="background-position: 0px 0px;"
        data-300="background-position:0px -200px;"
    >
    <div class="hsContainer">
        <div class="hsContent container"
            data-0="opacity:1;"    
            data-500="opacity:0;"
        >
            Lorem ipsum
        </div>
    </div>
</div></section>

我的Css是：

.hsContainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-height: 50%;
    overflow: hidden;
    position: relative;
    opacity: 1;
}

.hsContent {
    font-size:5vw;
    max-width: 450px;
    margin: -150px auto 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #ebebeb;
    padding: 13% 8%;
    text-align: center;
    text-shadow: 0 0 5px #333;
}

.bcg {
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 45vw;
    width: 100%;
}

我不知道问题来自哪里。有人有想法吗？

Answer 1

是的，skrollr导致该问题成为其视差计算的结果。初始化skrollr时You can pass in forceHeight=false as an option，如下所示：

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

然后它会单独留下<body>高度。

Skrollr改变身体的高度

1 个答案: