Question

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

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/中看到正在应用的相应类。我不确定你要对动画做什么 - 这部分似乎不起作用，但是类分配现在适用于滚动范围的每个单独的四分之一。您可能希望更改每个特定范围的颜色，因为它们似乎与您在背景中的颜色不匹配。

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

1 个答案: