jquery - 当页面滚动到特定百分比时，如何向元素添加Class？

Question

我正在制作一个标题固定在顶部的网站(它将包含导航)。当此 header 滑过特定的 div 时，我希望它根据该部分的颜色进行动画处理。

我决定通过使用 jQuery 在页面向下滚动特定百分比时将动画类“toRed”添加到我的页眉来执行此操作。

var scrollPercentage = 100 * ($(this).scrollTop() / $('body').height());
$(window).scroll(function () {
    if ( 50 <= scrollPercentage >= 75){
        $('header').addClass('toRed');
    }
});

JSFiddle:http://jsfiddle.net/5q8nH/16/

所以为了解释 fiddle ，当页面向下滚动到红色部分时，即页面的 50% 到 75% 之间，我希望标题通过“toRed”设置动画并将红色变为 div 的颜色.

Answer 1

您必须在事件处理程序中重新计算您的 scrollPercentage，以便在每个事件上重新计算它，您也必须修正比较。

$(window).scroll(function () {
    var scrollPercentage = 100 * ($(this).scrollTop() / $('body').height());
    if (scrollPercentage >= 50 && scrollPercentage <= 75){
        $('header').addClass('toRed');
    }
});

而且，我怀疑，当 scrollPercentage 不在正确范围内时，您可能需要删除该类，因此这不是一个永远无法撤消的单向转换:

$(window).scroll(function () {
    var scrollPercentage = 100 * ($(this).scrollTop() / $('body').height());
    if (scrollPercentage >= 50 && scrollPercentage <= 75){
        $('header').addClass('toRed');
    } else {
        $('header').removeClass('toRed');
    }
});

---

看看你的 jsFiddle，你可以通过像这样重新排序来简化你的多重比较:

$(window).scroll(function () {
    var scrollPercentage = 100 * ($(this).scrollTop() / $('body').height());
    var newClass;
    if (scrollPercentage >= 75){
        newClass = 'toGreen';
    } else if (scrollPercentage >= 50) {
        newClass = 'toRed';
    } else if (scrollPercentage >= 25) {
        newClass = 'toYellow';
    } else {
        newClass = 'toBlue';
    }
    $('header').removeClass('toGreen toBlue toRed toYellow').addClass(newClass);
});

在这个修改后的 jsFiddle 中滚动到此处时，您可以看到应用了适当的类:http://jsfiddle.net/jfriend00/6vznD/ .我不确定您尝试对动画做什么 - 该部分似乎不起作用，但类分配现在可以在滚动范围的每个单独四分之一处正常工作。您可能想要更改每个特定范围的颜色，因为它们似乎与背景中的颜色不匹配。