Не получается со скриптом скроллинга, как правильно написать скрипт?

Question

[Стас]

<div class="wrapper">
    <div class="frame-1">
    </div>
    <div class="frame-2">
    </div>
    <div class="frame-3">
    </div>
</div>

.wrapper {
    position: relative;
    height: 962px;
}
.frame-1 {
    top: 0px;
    background:#c5d8c5;
    width:100%;
    height: 962px;
    transition: all 3s ease;
    position: absolute;
}
.frame-2 {
    width:100%;
    top: 962px;
    background:#99ff99;
    height: 962px;
    position: absolute;
    transition: all 3s ease;
}
.frame-3 {
    width:100%;
    top: 1924px;
    background:#ff0000;
    height: 962px;
    position: absolute;
    transition: all 3s ease;
}

var $document = $(document),
    $element1 = $('.frame-1'),
    $element2 = $('.frame-2'),
    $element3 = $('.frame-3');

$(window).scroll(function () {
    if ($(this).scrollTop() >= 1) {
        $element1.css("top", "-962px");
        $element2.css("top", "0px");
        $element3.css("top", "962px");
    } else if ($(this).scrollTop() >= 963) {
        $element1.css("top", "-1924px");
        $element2.css("top", "-962px");
        $element3.css("top", "0px");
    } else {
        $element1.css("top", "0px");
        $element2.css("top", "962px");
        $element3.css("top", "1924px");
    }
});

Comments

[Николай]

Поясните пожалуйста, что вы хотите сделать? Чтобы при одном событии прокрутки менялся сразу фрейм на следующий?

[Стас]

фрейм на всю длину при открытии 1 фрейм стоит на top:0 при прокрутке страници вниз 1 фрейм уходи в верх и его заменяет второй фрей вставая на позицию top:0;( это у меня получилось) а вот почему то при прокрутке на 3 фрейм он он прокручивается просто а не как с первого на второй "думаю понятно описал проблему=)"

[Стас]

Николай: вот пример cssdeck.com/labs/full/rmwkgcz5

[Николай]

Поставьте принт значения scrollTop в консоль. Когда вы двигаете элементы через "top" скролл как бы остается на одном месте. Как вариант - не привязываться к значению скролла и делать так: при событии скролла, если скролл был вниз - показываем следующий фрейм. Если вверх - предыдущий. Текущий фрейм и их количество храним в некоторой функции.

[Стас]

Николай: а вы не могли бы скинуть исправленный скрипт, а то я в них ноль =)

Answer 1

[Николай]

jsfiddle.net/healqq/hemchpo3
Вот фидл. Набросал то, что я имел ввиду. Вообще если это все делается не в учебных целях, а для реального проекта - лучше взять какую-нибудь библиотеку, благо такое сейчас на каждом шагу вставляют.

Answer 2

[Стас]

Спасибо