css 我如何创建一个导航栏，是响应相对于您在页面上的位置？[已关闭]

8yoxcaq7 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(129)

已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗？**更新问题，使其仅关注editing this post的一个问题。

16小时前就关门了。
Improve this question
我最近创建了这个导航栏，这是我制作的第一个导航栏，我对它很满意，但它并没有完全满足我的愿景：

我尝试创建的是一个导航栏，它将根据您在页面上的位置做出响应。例如，如果我在 about 部分的顶部，它将看起来像这样：

当你继续滚动通过各个部分，他们将滚动沿侧导航栏，一旦到达顶部的下一个部分坐在顶部下面的前一个。
我看过Spyscroll，但我没有在文档上看到任何东西，也没有在任何其他地方看到它有我所描述的庄园响应的例子。相反，我看到它要么在部分上，要么不在部分上。
我只是希望被指向正确的方向，因为我相信这样的事情是可能的，不幸的是，我是相当新的网络开发，你不知道你不知道！
顺便说一句，我也很好奇，如果这是一个坏主意，从UI/UX的立场，因为我还没有能够找到任何这样的例子。

为清楚起见进行编辑

我不是在寻求帮助来修复损坏的代码，我是在问我想要实现的目标是否可行，以及我需要研究什么来创建它。
如果您有兴趣查看我之前创建的导航栏的代码，可以在此处找到：Simple Navigation Bar

css

来源：https://stackoverflow.com/questions/74624654/how-can-i-create-a-nav-bar-that-is-responsive-relative-to-your-location-on-the-p

2条答案

按热度按时间

u2nhd7ah1#

你可以使用Intersection Observer (IO)来实现这个功能。通过IO，你可以观察截面，并在截面与其他截面或与视口相交时做出React（这就是你想要的）。
首先，您必须指定IO的选项：

let options = {
  rootMargin: '-50px 0px -55%' // whatever suits your usecase, see documentation for this!
}

let observer = new IntersectionObserver(callback, options);

然后定义要观察的元素，类似于：

let entries = document.querySelectorAll('section');
entries.forEach(entry => {observer.observe(entry);})

最后一步是定义元素相交时应发生的情况：

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
     //specify what should happen if an element is coming into view, like defined in the options. 
    }
  });
}, config);

赞(0）回复(0）举报 2022-12-01

t9aqgxwy2#

也许它有点乱，但它可以表明我的一个想法：
第一个
您可以编辑它here

赞(0）回复(0）举报 2022-12-01