已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗?**更新问题,使其仅关注editing this post的一个问题。
16小时前就关门了。
Improve this question
我最近创建了这个导航栏,这是我制作的第一个导航栏,我对它很满意,但它并没有完全满足我的愿景:
我尝试创建的是一个导航栏,它将根据您在页面上的位置做出响应。例如,如果我在 about 部分的顶部,它将看起来像这样:
当你继续滚动通过各个部分,他们将滚动沿侧导航栏,一旦到达顶部的下一个部分坐在顶部下面的前一个。
我看过Spyscroll,但我没有在文档上看到任何东西,也没有在任何其他地方看到它有我所描述的庄园响应的例子。相反,我看到它要么在部分上,要么不在部分上。
我只是希望被指向正确的方向,因为我相信这样的事情是可能的,不幸的是,我是相当新的网络开发,你不知道你不知道!
顺便说一句,我也很好奇,如果这是一个坏主意,从UI/UX的立场,因为我还没有能够找到任何这样的例子。
为清楚起见进行编辑
我不是在寻求帮助来修复损坏的代码,我是在问我想要实现的目标是否可行,以及我需要研究什么来创建它。
如果您有兴趣查看我之前创建的导航栏的代码,可以在此处找到:Simple Navigation Bar
2条答案
按热度按时间u2nhd7ah1#
你可以使用Intersection Observer (IO)来实现这个功能。通过IO,你可以观察截面,并在截面与其他截面或与视口相交时做出React(这就是你想要的)。
首先,您必须指定IO的选项:
然后定义要观察的元素,类似于:
最后一步是定义元素相交时应发生的情况:
t9aqgxwy2#
也许它有点乱,但它可以表明我的一个想法:
第一个
您可以编辑它here