就像标题说的那样。我在顶部有一个导航栏,并提供了一些代码,这些代码负责为它分配活动类。除了一个。一个就是根本不注册任何东西,也不接收该类。
有问题的是#navEx
,与之对应的是.js-ex
。我已经尝试了各种方法,并且我敢肯定这是一个愚蠢的错误。但是,我花了太多时间试图解决这个问题,现在我只是想解决这个问题。单击时还具有平滑滚动的功能,但我怀疑问题出在哪里。如果证明有必要,我也会在其中进行编辑。
HTML标头:
<header class="header">
<div class="col-lg-12">
<div class="header-content">
<a class="header-content-logo" href="index.html">PLACEHOLDER</a>
<nav class="header-content-navigation" id="smooth-scroll">
<ul>
<li><a href="top-anchor" id="navHome" class="active">Home</a></li>
<li><a href="courses-anchor" id="navCourses">Kursevi</a></li>
<li><a href="prof-anchor" id="navProfs">Profesori</a></li>
<li><a href="ex-anchor" id="navEx">Ekskurzije</a></li>
<li><a href="contact-anchor" id="navContact">Kontakt</a></li>
</ul>
</nav>
</div>
</div>
</header>
HTML部分:
<div class="ex-holder js-ex" id="ex-anchor">
<section class="section-header">
<div class="container">
<div class="row center">
<div class="col-lg-8 about-text">
<h2>Ekskurzije</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
</div>
</div>
</div>
</section>
</div>
jQuery代码:
//ANIMATIONS ON SCROLL
$(document).bind('scroll', function(){
var scrollOffset = $(document).scrollTop();
var containerOffsetHome = $('.header').offset().top - window.innerHeight;
var containerOffsetEx = $('.js-ex').offset().top - window.innerHeight/2;
var containerOffsetProfs = $('.js-prof').offset().top - window.innerHeight/2;
var containerOffsetContact = $('.js-contact').offset().top - window.innerHeight/2;
var containerOffsetCourses = $('.js-courses').offset().top - window.innerHeight/2;
if (scrollOffset > containerOffsetHome) {
$('.header-content-navigation ul li a').removeClass('active');
$('#navHome').addClass('active');
}
if (scrollOffset > containerOffsetCourses) {
var i = 1;
$('.course-anim').each(function(){
var self = $(this);
setTimeout(function(){
self.addClass('js-go-side');
}, i*280);
i++;
});
$('.header-content-navigation ul li a').removeClass('active');
$('#navCourses').addClass('active');
}
if (scrollOffset > containerOffsetEx) {
$('.header-content-navigation ul li a').removeClass('active');
$('#navEx').addClass('active');
}
if (scrollOffset > containerOffsetProfs) {
var i = 1;
$('.prof-box').each(function(){
var self = $(this);
setTimeout(function(){
self.addClass('js-go');
}, i*500);
i++;
});
$('.header-content-navigation ul li a').removeClass('active');
$('#navProfs').addClass('active');
}
if (scrollOffset > containerOffsetContact) {
$('.header-content-navigation ul li a').removeClass('active');
$('#navContact').addClass('active');
}
});