Изменение высоты и положения нескольких элементов в порядке в зависимости от положения прокрутки

Question

Изменение высоты и положения нескольких элементов в порядке в зависимости от положения прокрутки

0

В настоящее время я создаю веб-сайт с прокруткой на одну страницу с несколькими div. При прокрутке эти divs изменяют высоту и позицию с помощью jQuery для создания эффекта параллакса.

Я быстро привел пример того, чего я пытаюсь достичь, этот пример имеет два div. Однако, если бы я должен был добавить больше div (5 или 6), то я не уверен, как я буду кодировать это в jQuery.

Когда зеленый div находится в верхней части страницы, а высота равна 100% высоты документа, тогда я хочу, чтобы третий div прокручивался. Таким образом, зеленый div должен действовать как красный div после его полной высоты, Я знаю, что могу сделать это, используя нагрузку if/else, определяющую, равна ли высота документа чему-то, но есть ли более чистый способ сделать это?

Вот что я имею в настоящее время в терминах jQuery, но я не уверен, куда идти отсюда:

$(document).scroll(function(){
    cs = $(document).scrollTop();
    $('.base').css({'height':700-cs});
    $('.one').css({'height':cs, 'top':700-cs});
})

Alex 18 апр. 2014, в 14:45

Источник

0

Вы можете использовать анимацию CSS, проверьте это, я думаю, это должно помочь вам
user3241019 18 апр. 2014, в 13:05

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Вы можете использовать анимацию CSS, проверьте это, я думаю, это должно помочь вам

mzedeler · Answer 1 · 2014-04-18T11-06-00.000Z

У меня есть то, что займет у вас половину, сделав это:

$(document).scroll(function(){
    cs = $(document).scrollTop();
    $('.base').css({'height': 700-cs});
    $('.one').css({'height': 1400-cs});
    $('.two').css({'height': 2100-cs});
});

В сочетании с этим измененным CSS:

body {
    margin: 0;
    padding:0;
    height:4000px;
}
div.item {
    width:100%;
    height:100%;
    background:red;
    max-height:700px;
}
div.item.one {
    top:100%;
    height:0;
    background:green;
}
div.item.two {
    bottom:0;
    height:0;
    background:blue;
    display: block;
}
img {
    right:50%;
    top:50%;
}

Позиционирование изображений теперь зависит от вас.