Skrollr меняет высоту тела

У меня проблема с моим сайтом. Я использую Skrollr для отображения одного изображения и текста на этом изображении. Текст исчезает, а изображение имеет приятный эффект. Сначала я использовал Foundations в качестве фреймворка, но это не работает для меня. Поэтому я перешел на Bootstrap. Теперь у меня проблема с высотой моего тела 2157 пикселей. Не знаю почему, но на страницах без Скроллра этого не происходит. Мне кажется, что проблема в 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%;
}

Я не вижу, откуда проблема. У кого-нибудь есть идея?


html css skrollr
person Christoph    schedule 25.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, именно skrollr вызывает эту проблему из-за своих вычислений параллакса. Вы можете передать forceHeight=false в качестве опции при инициализации skrollr, например:

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

И тогда он оставит ваш рост <body> в покое.

person simmer    schedule 22.04.2016