11

我正在建立一个这样的网站（几乎是垂直幻灯片）：

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

我想做但不知道的一件事是如何使滚动 SNAP 达到滚动时颜色变化的程度。

例如，当滚动时，您会在您滚动到的下一个颜色的顶部附近达到大约 50-100 像素，如果它能够捕捉到该点会很好，而不是继续滚动，因为很难让那个“框架”完美对齐。这取决于用户滚动完美的数量，以便他们查看完整的帧，而不是序列中前一帧或下一帧的片段。

任何知道是否有 jQuery 插件或其他东西的人都会是我的英雄。

这是到目前为止的整个页面。获得当前效果的简单编码：

<!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>
4

3 回答 3

5

是的，有可能。他们的代码虽然很糟糕。在制作动画scrollTop时，您需要确保忽略通常会导致滚动的其他用户输入。看看这个测试用例，了解如何防止用户滚动。

于 2012-06-27T19:40:33.673 回答
2

您可以使用

scroll() jumpScroll() scrollBy()

和一点你自己的代码。

例如，

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

会滚动到页面上的那个点

于 2012-06-27T19:40:44.367 回答
0

我也在追求同样的事情，所以几周前问了一个类似的问题。我发现了一个名为stellar.js的插件，它具有该功能，但演示是水平的，我一生都无法将其更改为垂直的。无论如何，有人发布了一个解决方案，我为 mousescroll 而不是单击进行了编辑：http: //jsfiddle.net/djsbaker/dxzk4/

在网站说明中，我遇到了一个问题，即它在巨大的固定背景图像上相当滞后。事实上非常滞后，但我使用的视差混合得不好。

于 2012-06-27T19:35:00.737 回答