【问题标题】:How can I observe the current section being viewed by a user in a web page?如何观察用户在网页中查看的当前部分?
【发布时间】:2016-04-24 05:29:20
【问题描述】:

当用户查看网页时,他们通过滚动导航到页面的不同部分。在Bootstrap's documentation 中,bs-docs-sidenav 列表项会更改颜色以反映当前处于“活动”状态的部分(在屏幕上可见)。

  • 这种类型的观察是否有名称(或名称)?
  • DOM 是否具有跟踪元素位置的任何属性?
  • 如果没有,是否有任何常用插件/小型库可以利用这些信息?

【问题讨论】:

  • 我认为这里有人问过类似的问题:stackoverflow.com/questions/7790725/…
  • 嗨@neallred - 你链接到的问题是关于跟踪鼠标位置。我正在寻找详细说明如何在到达视口顶部时观察网页部分(部分有时用<h2 id="mySection">My Section</h2> 标识)的资源。
  • This 是一个类似的问题。我现在正在考虑的跟踪节点的方法是注册每个“部分”并使用 getBoundingClientRect 函数来跟踪注册的部分并确定哪个部分是“活动的”。

标签: javascript html dom web


【解决方案1】:

原来 Bootstrap 有一个名为 Scrollspy 的插件。 getBoundingClientRect function 可用于查找元素位置。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-08
    • 1970-01-01
    • 2012-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多