jQuery平滑滚动链接颜色更改不起作用

Question

我使用jQuery设计了一个平滑的滚动。我面临的一个问题是，当我点击navbar链接时，会出现闪烁。

假设我点击Platform链接，Why v9链接上有闪烁。当我再次点击其他链接时，上一个链接会闪烁。我无法调试它。

有人能帮我吗？这将有很大帮助。

$(document).ready(function() {
$('.nav-item').click(function() {
$(".nav-item").removeClass('active');
$(this).addClass('active');
$('html, body').animate({
scrollTop: $($(this).children().attr('href')).offset().top
}, 800);
return false;
});
//Active Link
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
$('.nav-link').each(function() {
var sectionOffset = $($(this).attr('href')).offset().top;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
})
})
});

.navbar-nav {
font-size: 18px;
font-weight: bold;
}
.navbar-light .navbar-brand {
color: #111;
}
.navbar-light .navbar-nav .nav-link {
color: #111;
}
/* navbar css code */
.navbar ul.navbar-nav li.nav-item a:hover,
.navbar ul.navbar-nav li.nav-item.active a {
color: #89c353;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#section1">Why v9
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Platform</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Process</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Benefits</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 feedback">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">LOREM IPSUM</button>
</form>
</div>
</div>
</nav>
<div id="section1" style="background:#d1d1d1; height:800px;"></div>
<div id="section2" style="background:#f0f0f0; height:800px;"></div>
<div id="section3" style="background:#d1d1d1; height:800px;"></div>
<div id="section4" style="background:#f0f0f0; height:800px;"></div>

Answer 1

您可以添加一个全局变量来确定滚动是通过点击还是滚动：

$(document).ready(function () {
var clickScroll = false; //ADDED
$('.nav-item').click(function () {
clickScroll = true; //ADDED
$(".nav-item").removeClass('active');
$(this).addClass('active');
$('html, body').animate({
scrollTop: $($(this).children().attr('href')).offset().top
}, 800, function(){
clickScroll = false; //After the animation is finished set the varriable back to false
});
return false;
});
//Active Link
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
//console.log(scrollbarLocation);
$('.nav-link').each(function () {
var sectionOffset = $($(this).attr('href')).offset().top;
if (sectionOffset <= scrollbarLocation && !clickScroll) { //ADDED
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
})
})
});

Answer 2

我认为你可以通过写一行来解决这个问题。

$(window).scroll(function () {
// ADD
if ($('html, body').is(':animated')) { return; }

如果是flag，您仍然有问题。单击导航菜单，然后单击其他导航菜单，直到滚动结束。我认为先停止动画是件好事。

$('html, body').stop().animate({~

Answer 3

Add this in HTML
<script type="text/javascript">
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 60);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a.nav-link[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
</script>

Answer 4

$(document).ready(function () {
$('.nav-item').click(function () {
$(this).prev().hide('fast').show('fast').hide('fast').show('fast').hide('fast').show('fast');
$(".nav-item").removeClass('active');
$(this).addClass('active');
$('html, body').animate({
scrollTop: $($(this).children().attr('href')).offset().top
}, 800);
return false;
});
//Active Link
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
$('.nav-link').each(function () {
var sectionOffset = $($(this).attr('href')).offset().top;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
})
})
});

.navbar-nav {
font-size: 18px;
font-weight: bold;
}
.navbar-light .navbar-brand {
color: #111;
}
.navbar-light .navbar-nav .nav-link {
color: #111;
}

/* navbar css code */
.navbar ul.navbar-nav li.nav-item a:hover,
.navbar ul.navbar-nav li.nav-item.active a {
color: #89c353;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#section1">Why v9
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Platform</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Process</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section4">Benefits</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0 feedback">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">LOREM IPSUM</button>
</form>
</div>
</div>
</nav>
<div id="section1" style="background:#d1d1d1; height:800px;"></div>
<div id="section2" style="background:#f0f0f0; height:800px;"></div>
<div id="section3" style="background:#d1d1d1; height:800px;"></div>
<div id="section4" style="background:#f0f0f0; height:800px;"></div>
</body>
</html>