2

我目前正在为自己设计一个小小的单页作品集，到目前为止你可以在这里看到。我想要实现的是，当您向下滚动 div 时，背景会从透明淡入到现在的黄色。此外，当您继续滚动时，我希望它从黄色变为灰色。

基本上就像这个网站所做的一样。

我整天都在网上搜索，在尝试了 10 多个不同的教程、阅读了无数的论坛和对自己哭泣之后，我没有找到任何适合我的东西。我可以处理 html 和 css，但在涉及 jquery 时不知道，所以我不知道在编写自己的代码时从哪里开始。

如果有人可以在正确的方向上推动我，我将不胜感激。

谢谢。

4

3 回答 3

0

您可以使用jQuery UI制作动画

于 2013-07-27T18:16:20.780 回答
0

尝试这个

    $(document).scroll(function(){
    t = (100 - $(this).scrollTop())/100;
    if(t<0)t=0;
    $('.skyB').css({opacity: t})
  })

小提琴演示

希望对你有帮助

于 2013-07-27T18:39:45.640 回答
0

这个怎么样，见JSFiddle（解释如下）：

var height_colors = [
    [0, "#FFF"],
    [50, "#FFFF00"],
    [100, "#FF0000"],
    [150, "#FF00FF"],
    [200, "#00FF00"],
    [250, "#0000FF"],
    [300, "#00FFFF"],
    [350, "#123456"],
    [400, "#654321"],
    [450, "ABCDEF"],
    [500, "FEDCBA"]
];

var box = $("#lipsum");
box.on("scroll", function () {
    var scrollPos = $(this).scrollTop();
    $.each(height_colors, function(key, value) {
        if(scrollPos < value[0] || key == height_colors.length - 1) {
            box.css("background", value[1]);
            return false;
        }
    });
});

给定一个可滚动的 div#lipsum和一个[<height>, <color>]值数组，当我们滚动元素时，我们检查它的scrollTop()值，并遍历我们的数组，直到找到一个height低于 current 的值scrollTop()。

现在，这可以通过多种方式进行转变。例如，您可以计算相对于 的滚动位置，而不是计算可滚动 div 的位置document，然后将height_colors数组替换为元素数组和要迭代的颜色。你会做同样的事情，但是计算offset迭代元素的 ，直到你得到一个offset大于 current的元素scrollTop。

您的新数组可能如下所示：

var height_colors = [
    ["#elem-a", "#FFF"],
    ["#elem-b", "#555"],
    ...
]

在这种情况下，跟踪最后检查的元素可能会更好，以便在您意识到自己走得太远时使用“最后一个”。（未检查此代码）

 // Assign a default color for scroll positions before your first element
var last_color = "#FFF";
$.each(height_colors, function(key, value) {
    var current = $(value[0]);
    if(scrollPos < current.offset().top) {
        $("body").css("background", last_color);
    }
    last_color = value[1];
});

您提供的链接似乎做了类似的事情，正如有人指出的那样，您可以使用 jQuery UI 变体.animate()在颜色之间淡入淡出（尽管在我的示例中只有 50 像素停止，200 毫秒的动画太长了）。

于 2013-07-27T20:17:07.643 回答