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

【问题标题】：How do you add a Class to an element when the page scroll reaches a specific percentage?当页面滚动达到特定百分比时，如何向元素添加 Class？
【发布时间】：2014-04-13 00:12:31
【问题描述】：

我正在制作一个顶部固定有标题的网站（它将包含导航）。当此标题滑过特定 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/

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

【问题讨论】：

标签： jquery html css animation scroll

【解决方案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/。我不确定您要对动画做什么-该部分似乎不起作用，但是类分配现在对于滚动范围的每个单独的四分之一都可以正常工作。您可能需要更改每个特定范围的颜色，因为它们似乎与您在背景中的颜色不匹配。

【讨论】：