导航栏中的链接在滚动时不会更改颜色。它仅应更改链接的颜色,而不能这样做。我不知道类名等有什么问题
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('.plink').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('.plink').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - nav_height
}, 500);
return false;
});
.plink.active {
color:red;
}
.plink {
display:block;
padding-left: 35%;
font-family: "Raleway";
white-space: nowrap;
color: #fff!important;
font-size: 1.1rem;
text-decoration: none;
font-weight: bold;
transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light navbar-fixed-top">
<a class="navbar-brand" id="brand" href="#home">Arkkitehtuuritoimisto</a>
<ul class="navbar-nav" id="klop">
<li>
<a class="nav-link plink" href="#about">Yritys</a>
</li>
<li><a class="nav-link plink" href="#gallery">Referenssit</a></li>
<li><a class="nav-link plink" href="#footer">Yhteystiedot</a></li>
</ul>
</div>
</nav>
因此,在使用此代码之前,我不知道出了什么问题,并且可以正常工作。你能帮我吗?