0

我正在尝试使用 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>

CSS

@keyframes test{
    0%   {background-color: rgba(254,73,2,0);}
    25%  {background-color: rgba(254,73,2,.25);}
    50%  {background-color: rgba(254,73,2,.5);}
    75%  {background-color: rgba(254,73,2,.75);}
    100% {background-color: rgba(254,73,2,1);}
}

.activeLink {
    -webkit-transition: test .5s;
    transition: test .5s;
}

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");

        }  

    });

});

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

非常感谢任何帮助，谢谢

4

0 回答 0