Можно ли использовать эффект "привязки" при прокрутке?

Я создаю такой веб-сайт (вертикальное слайд-шоу почти):

http://mikelegacywebdesign.com/scrollpage_test/index.html

Единственное, что я хочу сделать, я не могу понять, как сделать прокручивающийся SNAP до такой степени, когда изменение цвета происходит при прокрутке.

Например, при прокрутке вы достигаете примерно 50-100 px в верхней части следующего цвета, на который вы прокручиваете, было бы неплохо, если бы это было привязано к этой точке, вместо того, чтобы просто продолжать прокручивать, потому что это трудно получить, что "кадр" идеально подходит. Это зависит от пользователя, чтобы прокручивать идеальную сумму, чтобы они просматривали полный кадр, а не фрагменты предыдущего или следующего кадра в последовательности.

Любой, кто знает, есть ли плагин jQuery или что-то для этого, будет моим героем.

Вот страница ENTIRE. Это простое кодирование, чтобы получить текущий эффект:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>

<style type="text/css">

    html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
    .container { height: 400%; width: 100%; }
    .section { height: 35%; width: 100%; }

    #section1 { background-color: #1d9ad7; }
    #section2 { background-color: #c83e3d; }
    #section3 { background-color: #75b946; }
    #section4 { background-color: #f4be2f; }

</style>
</head>
<body>
<div class="container">
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
    <div class="section" id="section4"></div>
</div>
</body>
</html>

Ответ 1

Да, это возможно. Однако их код ужасен. Во время анимации scrollTop вы должны убедиться, что дополнительный пользовательский ввод, который обычно приводит к прокрутке, игнорируется. Посмотрите на этот тестовый пример, чтобы получить представление о том, как предотвратить прокрутку пользователя.

Ответ 2

Вы можете получить желаемый эффект, используя

scroll() jumpScroll() scrollBy()

и немного вашего собственного кода.

Например,

function jumpScroll() {
    window.scroll(0,250);
}

Прокручивается до этой точки на странице

Ответ 3

Я был после того же, поэтому задал аналогичный вопрос несколько недель назад. Я нашел аддон под названием stellar.js, который имел функциональные возможности, но демонстрация была в горизонтальном положении, и я не мог в течение жизни меня изменить ее на вертикальную, В любом случае, кто-то опубликовал решение, которое я редактировал для mousescroll вместо щелчка: http://jsfiddle.net/djsbaker/dxzk4/

На заметке на сайте у меня были проблемы с тем, что он довольно отставал от огромных фиксированных фоновых изображений. На самом деле очень лаги, но я использовал параллакс, который плохо смешивался.