gpt4 book ai didi

javascript - 将 jQuery 转换为 Vanilla javaScript 时出现滚动问题

转载 作者:行者123 更新时间:2023-12-04 03:37:24 27 4
gpt4 key购买 nike

我正在将这个简单的滚动代码从 jQuery 转换为 vanilla Javascript,但在选择元素时遇到了一些小问题。谁能指出我正确的方向?非常感谢!

这是有效的 jQuery 代码:

jQuery LIVE DEMO

现在这是我的原始 Javascript 代码:

window.addEventListener('scroll', function() {
document.querySelectorAll('.target').forEach(function(item, index){
if($(window).scrollTop() >= $(this).offset().top) {
var id = $(this).attr('id');
document.querySelector('#nav nav a').classList.remove('active');
document.querySelector('#nav nav a[href=#'+ id +']').classList.add('active');
}
});
});

普通 JavaScript 演示:

JavaScript DEMO

最佳答案

我通过按 index 进行绑定(bind)(由我自行决定)删除了按属性 id 的绑定(bind):

document.querySelectorAll("#nav nav a")[index].classList.add("active");

此外,我插入了一个内部 forEach()删除所有地方的 active 类,随后接收到 current 类的 active 类。

$(window).scrollTop()替换为 window.pageYOffset ;

$(this).offset().top替换为 item.offsetTop .

window.addEventListener("scroll", function () {
document.querySelectorAll(".target").forEach(function (item, index) {
if (window.pageYOffset >= item.offsetTop) {
document.querySelectorAll("#nav nav a").forEach(function (a_del) {
a_del.classList.remove("active");
});
document.querySelectorAll("#nav nav a")[index].classList.add("active");
}
});
});

此外,在您的 html 中,一些覆盖 <div>不包含 / ,就像一个封闭的</div> .像那样:

<section id="main">
<div class="target" id="1">TARGET 1</div>
<div>item 1</div>
<div>item 1<div> <===
<div>item 1<div> <===
...

关于javascript - 将 jQuery 转换为 Vanilla javaScript 时出现滚动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66649495/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com