我是javascript的新手，我试图使菜单在用户滚动到书签页面时突出显示。 如果可能的话，请为书签页面的平滑滚动编写代码。
我的HTML:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto aw-menu">
<li class="nav-item item"><a class="nav-link" href="#index.html">Home</a></li>
<li class="nav-item item"><a class="nav-link" href="#">Updates</a></li>
<li class="nav-item item"><a class="nav-link" href="#about">About us</a></li>
<li class="nav-item item"><a class="nav-link" href="#course">Courses</a></li>
<li class="nav-item item"><a class="nav-link" href="#">Cells</a></li>
<li class="nav-item item"><a class="nav-link" href="#">Library</a></li>
<li class="nav-item item"><a class="nav-link" href="#">Placements</a></li>
<li class="nav-item item"><a class="nav-link" href="#">Contact-us</a></li>
</ul>
</div>
我的CSS:
.active{
background-color: #64b3f4;
font-weight: 300;
color: white;
border: 2px;
}
我的javascript:
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var navHeight = $('.aw-menu').outerHeight() + 1;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
} else {
sectionLink.parent().removeClass('active');
}
});
});
您使用的是jQuery，而不是纯JavaScript。 我在前一段时间做过类似于你的问题的事情。 请看。
null
function setScrolls() {
$('#navbarSupportedContent a[href*="#"]').each(function(e) {
let desiredId = $.attr(this, 'href').split('#')[1]; //get the test right from #
let desidedOffset = $('#' + desiredId).offset().top;
let windowTop = $(window).scrollTop();
// set acitve class to 'li' when ve get to desiredId block - 50px
if (desidedOffset - 50 < windowTop) {
$(this).parent().addClass('active');
} else {
$(this).parent().removeClass('active');
}
});
// counting the numbert of .active li
let activeLenght = $('#navbarSupportedContent .active').length;
// set a.cuttent for the last li.active
if (activeLenght > 0) {
$('#navbarSupportedContent .active a').removeClass('current');
$('#navbarSupportedContent .active:nth-child(' + activeLenght + ') a').addClass('current');
}
}
$(document).ready(function($) {
setScrolls();
});
$(window).on("scroll", function() {
setScrolls();
});
// smooth scroll to desired element
$('#navbarSupportedContent a[href*="#"]').click(function(e) {
let target = $(this).attr('href').split('#')[1];
if ($('#' + target).length) {
$('html, body').animate({
scrollTop: $('#' + target).offset().top
}, 800);
return false;
}
});/* Just an example */
#navbarSupportedContent {
position: fixed;
left: 100px;
}
#test1 {
height: 1000px;
background: green;
}
#test2 {
height: 1000px;
background: cyan;
}
#navbarSupportedContent li.active a.current {
color: #fab405;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto aw-menu">
<li class="nav-item item"><a class="nav-link" href="#test1">Home</a></li>
<li class="nav-item item"><a class="nav-link" href="#test2">Updates</a></li>
</ul>
</div>
<div id="test1">test1</div>
<div id="test2">test2</div>