Jquery 使用css动画更改链接的背景颜色

我正在尝试使用css动画更改锚定标记的背景颜色。我希望颜色在特定的链接上褪色，这取决于用户在页面上的位置。为此，我创建了一个关键帧设置以淡入颜色，然后创建了一个类将该动画添加到元素中。然后，我通过javascript将该类添加到锚定标记中，但我似乎无法使任何一个类正常工作

这是我的密码

HTML

<header id="header">
    <div class="container">
        <nav id="example-one">
            <a class="nav" id="home1" href="#home">Welcome</a>
            <a class="nav" id="featuredWork1" href="#featuredWork">Work</a>
            <a class="nav" id="skills1" href="#skills">Skills</a>
            <a class="nav" id="about1" href="#about">About</a>
            <a class="nav" id="contact1" href="#contact">Contact</a>
        </nav>
    </div>
</header>

JavaScript

$( window ).load(function() {


    //Grabs the height value of the header, can use this variable later for css media queieres instead of hardcoding pixel value
    var headerHeight = document.getElementById('header').offsetHeight;

    //Sets top values of sections to later be used in colour change segment



    //Allows for smooth scrolling
    var $root = $('html, body');
    $('a[href*=#]').click(function() {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight +10
        }, 600);
        return false;
    });

    //Change colour of header bar and elements based on which section the user is on
    $(document).scroll(function() {

        var top1 = $('#home').offset().top;
        var top2 = $('#featuredWork').offset().top - headerHeight;
        var top3 = $('#skills').offset().top - headerHeight;
        var top4 = $('#about').offset().top - headerHeight;
        var top5 = $('#contact').offset().top - headerHeight;


        if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            //adds and removes classes for animated line
            $('#home1').addClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {

            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').addClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').addClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').addClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top5) {
            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').addClass("activeLink");

        }  

    });

});

$（窗口）.load（函数（）{
//获取标题的高度值，以后可以将此变量用于css媒体查询，而不是硬编码像素值
var headerHeight=document.getElementById（'header'）。offsetHeight；
//设置稍后在颜色更改段中使用的节的顶部值
//允许平滑滚动
var$root=$（'html，body'）；
$（'a[href*=#]'）。单击（函数（）{
$root.animate({
scrollTop:$（$.attr（this，'href'））.offset（）.top-headerHeight+10
}, 600);
返回false；
});
//根据用户所在的区域更改标题栏和元素的颜色
$（文档）。滚动（函数（）{
var top1=$（'#home'）.offset（）.top；
var top2=$（'#featuredWork'）.offset（）.top-headerHeight；
var top3=$（'#skills'）.offset（）.top-headerHeight；
var top4=$（'#about'）.offset（）.top-headerHeight；
var top5=$（'#contact'）.offset（）.top-headerHeight；
if（$（document）.scrollTop（）>=top1&&$（document）.scrollTop（）=top2&&$（文档）.scrollTop（）=top3&&$（文档）.scrollTop（）=top4&&$（文档）.scrollTop（）=top5）{
$（'#header'）.css（'background-color'，'#dadfe0'）；
$（'.nav'）.css（'color'，'#21303f'）；
$（'#home1'）.removeClass（“activeLink”）；
$（'#featuredWork1'）.removeClass（“activeLink”）；
$（'#skills1'）.removeClass（“activeLink”）；
$（'#about1'）。removeClass（“activeLink”）；
$（'#contact1'）.addClass（“activeLink”）；
}  
});
});

我试图添加这个类的基础上的滚动位置的网站，但我似乎没有得到任何东西。我可以在元素检查器中看到该类正在基于滚动添加和删除，但我没有看到任何动画效果，我猜我的css动画语法已关闭

---

非常感谢您的帮助，如果您正在使用关键帧，请使用

动画

/

-webkit动画

，而不是

过渡

/

-webkit过渡

嘿，谢谢您的帮助，不幸的是，将语法从转换转换到动画似乎仍然没有什么好处effect@freestock.tk感谢您的评论，出于某种原因，我仍然无法让它在我的锚标签上工作，但我将它们包装在

中，并能够针对

标签。现在工作很完美

$( window ).load(function() {


    //Grabs the height value of the header, can use this variable later for css media queieres instead of hardcoding pixel value
    var headerHeight = document.getElementById('header').offsetHeight;

    //Sets top values of sections to later be used in colour change segment



    //Allows for smooth scrolling
    var $root = $('html, body');
    $('a[href*=#]').click(function() {
        $root.animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight +10
        }, 600);
        return false;
    });

    //Change colour of header bar and elements based on which section the user is on
    $(document).scroll(function() {

        var top1 = $('#home').offset().top;
        var top2 = $('#featuredWork').offset().top - headerHeight;
        var top3 = $('#skills').offset().top - headerHeight;
        var top4 = $('#about').offset().top - headerHeight;
        var top5 = $('#contact').offset().top - headerHeight;


        if ($(document).scrollTop() >= top1 && $(document).scrollTop() < top2) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            //adds and removes classes for animated line
            $('#home1').addClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top2 && $(document).scrollTop() < top3) {

            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').addClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top3 && $(document).scrollTop() < top4) {

            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').addClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top4 && $(document).scrollTop() < top5) {
            $('#header').css('background-color', '#21303f');
            $('.nav').css('color', '#dadfe0');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').addClass("activeLink");
            $('#contact1').removeClass("activeLink");

        } else if ($(document).scrollTop() >= top5) {
            $('#header').css('background-color', '#dadfe0');
            $('.nav').css('color', '#21303f');

            $('#home1').removeClass("activeLink");
            $('#featuredWork1').removeClass("activeLink");
            $('#skills1').removeClass("activeLink");
            $('#about1').removeClass("activeLink");
            $('#contact1').addClass("activeLink");

        }  

    });

});