我有一个长的单页寻呼机，它有不同的部分，每个部分都在自己的<article id="section-title">中。我想以Netlify文档的样式添加导航(参见示例(，它通过在滚动时附加当前部分的id来更改地址栏。我认为如果它在滚动到第一节之前的顶部时返回到原始URL(没有锚(会更好。不过，我不知道从哪里开始，也不知道如何寻找具有此功能的插件。
我如何使用jQuery完成这一切？
这个问题有点过于宽泛，我很惊讶它没有关闭，但由于你是新来的，我会让你领先一步，你在这个网站上拥有了你需要的一切：
您需要：
1-查看您的文章是否在Viewport中，并提取id。在这个主题中，您有几个不同的解决方案：在jQuery中使用随机数的div 动态检测页面滚动上的当前div
2-您需要在不重新加载的情况下更新地址栏URL，您需要学习如何在下一个主题中使用新URL更新地址栏而不进行哈希或重新加载页面以及如何在不重新载入页面的情况下修改URL？
我给你举了一个基本的例子来说明它是如何工作的：
<html>
<body>
<header>
<style type="text/css">
section {
min-height: 300px
}
</style>
</header>
<section id="section1"> section 1</section>
<section id="section2"> section 2</section>
<section id="section3"> section 3</section>
<section id="section4"> section 4</section>
<script type="text/javascript">
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var findMe = document.querySelectorAll('section');
window.addEventListener('scroll', function(event) {
// add event on scroll
findMe.forEach(page => {
//for each .page
if (isInViewport(page)) {
//if in Viewport
console.clear();
console.log(page.id);
// exampla with hash #:
//document.location.hash = page.id;
//new url
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + page.id;
window.history.pushState({
path: newurl
}, '', newurl);
}
});
}, false);
</script>
</body>
</html>
这已经足够你自己去做了。首先在这里搜索主题以获得答案，然后如果您在代码的某个部分遇到问题，请随时寻求帮助。
欢迎来到SO，祝你好运。