我做了一个带有视差样式的自定义菜单。菜单固定在顶部,我想在页面滚动时更改菜单的事件类。我是通过单击功能完成的,因此通过单击菜单,事件类将更改为该特定菜单。我创建的菜单的 id 不是“href="#home"”。我找到的大部分代码都是由 href="#"和 nav 完成的。我不希望菜单是带有导航栏的菜单。那么可以通过id来实现吗?
我的代码如下
$("#home-btn").on('click',function() {
$('html, body').animate({
scrollTop : $("#home").offset().top - 10
}, 1000);
$('.main-menu ul li').removeClass('active');
$('#home-btn').parent().addClass('active');
});
$("#service-btn").on('click',function() {
$('html, body').animate({
scrollTop : $("#service").offset().top - 45
}, 1000);
$('.main-menu ul li').removeClass('active');
$('#service-btn').parent().addClass('active');
});
$("#about-btn").on('click',function() {
$('html, body').animate({
scrollTop : $("#about").offset().top - 120
}, 1000);
$('.main-menu ul li').removeClass('active');
$('#about-btn').parent().addClass('active');
});
$("#contact-btn").on('click',function() {
$('html, body').animate({
scrollTop : $("#contact").offset().top - 120
}, 2000);
$('.main-menu ul li').removeClass('active');
$('#contact-btn').parent().addClass('active');
});
.top-adj {
margin-top: 130px;
}
.main-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #f1f1f1;
}
.main-menu ul {
display: flex;
align-items: center;
justify-content: space-between;
}
.main-menu ul li {
display: block;
font-weight: 600;
margin-left: 25px;
}
.main-menu ul li:first-child {
margin-left: 0px;
}
.main-menu ul li a {
color: #000;
display: block;
cursor: pointer;
padding: 25px 10px;
position: relative;
border-bottom: 4px solid;
border-color: transparent;
}
.main-menu ul li a:hover {
text-decoration: none;
}
.main-menu ul li.active a {
padding: 25px 10px;
border-bottom: 4px solid #104377;
}
.section {
width: 100%;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
<ul>
<li class="active"><a id="home-btn">Home</a></li>
<li><a id="service-btn">Services</a></li>
<li><a id="about-btn">About</a></li>
<li><a id="contact-btn">Contact</a></li>
</ul>
</div>
<div class="top-adj"></div>
<div class="section" id="home">Home</div>
<div class="section" id="service">Service</div>
<div class="section" id="about">About</div>
<div class="section" id="contact">Contact</div>
最佳答案
这里我们使用 Vanilla JavaScript 的 querySelectorAll
方法选择了所有元素。
您可以进一步了解Array.prototype.forEach.call()
function here .
我们使用 window.onscroll
事件来执行滚动 spy ,其中我们将每个部分的顶部偏移量与窗口的滚动位置相匹配,并基于它添加类。
(function () {
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function (e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function () {
var scrollPosition = document.documentElement.scrollTop ||
document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[id*=' + i +
']').parentElement.setAttribute('class', 'active');
}
}
};
// Your code
$("#home-btn").on('click', function () {
$('html, body').animate({
scrollTop: $("#home").offset().top
}, 1000);
});
$("#service-btn").on('click', function () {
$('html, body').animate({
scrollTop: $("#service").offset().top
}, 1000);
});
$("#about-btn").on('click', function () {
$('html, body').animate({
scrollTop: $("#about").offset().top
}, 1000);
});
$("#contact-btn").on('click', function () {
$('html, body').animate({
scrollTop: $("#contact").offset().top
}, 2000);
});
})();
.top-adj {
margin-top: 130px;
}
.main-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #f1f1f1;
}
.main-menu ul {
display: flex;
align-items: center;
justify-content: space-between;
}
.main-menu ul li {
display: block;
font-weight: 600;
margin-left: 25px;
}
.main-menu ul li:first-child {
margin-left: 0px;
}
.main-menu ul li a {
color: #000;
display: block;
cursor: pointer;
padding: 25px 10px;
position: relative;
border-bottom: 4px solid;
border-color: transparent;
text-decoration: none;
}
.main-menu ul li a:hover {
text-decoration: none;
}
.main-menu ul li.active a {
padding: 25px 10px;
border-bottom: 4px solid #104377;
}
.section {
width: 100%;
height: 100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
<ul>
<li class="active"><a id="home-btn">Home</a></li>
<li><a id="service-btn">Services</a></li>
<li><a id="about-btn">About</a></li>
<li><a id="contact-btn">Contact</a></li>
</ul>
</div>
<div class="top-adj"></div>
<div class="section" id="home">Home</div>
<div class="section" id="service">Service</div>
<div class="section" id="about">About</div>
<div class="section" id="contact">Contact</div>
我希望这会有所帮助。
关于jquery - 当页面滚动时如何使用 id 更改菜单的事件类别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60108005/