我正在尝试使用css动画更改锚标记的背景颜色。我希望颜色在特定链接上淡入,具体取决于用户在页面上的位置。为此,我创建了一个淡入淡出颜色的关键帧设置,然后创建了一个将该动画添加到elemt的类。然后我通过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动画语法是关闭的。
非常感谢任何帮助,谢谢