角材料 - 词缀

Posted 2023-03-13

【中文标题】角材料 - 词缀

【英文标题】：Angular material - Affix

【发布时间】：2018-06-05 00:14:13

【问题描述】：

我使用 Angular 4 和 Angular 材料 2.0.0-beta.12。

我想在angular material website上实现一个叫做“affix~”的东西

我需要构建类似这样的图像：

在滚动时，如果在页面上看到内容，这些项目将处于“活动状态”。每个项目也将有一个锚点。

有人知道一种简单而干净的方法吗？

提前感谢您的宝贵时间。

【问题讨论】：

Angular Material 网站在 Github 上。你可以看看它的代码。

它被称为目录。有关详细信息，请在此处查看 <table-of-contents> 的源代码：github.com/angular/material.angular.io/blob/… 和 github.com/angular/material.angular.io/blob/…。它还使用position: sticky 使其“粘”。

【参考方案1】：

如果您需要从头开始创建，您可以按照教程进行操作：

https://oliverveits.wordpress.com/2017/07/18/angular-4-automatic-table-of-contents/

它解释了如何创建一个两级自动目录。您可以通过执行以下操作来克隆代码：

# git clone https://github.com/oveits/ng-universal-demo
# cd ng-universal-demo
# git checkout 8ca27d5   # to be sure you are working with exact same that has been created in this blog

也可以使用材质角目录https://github.com/angular/material.angular.io/blob/b029f9108d4c89ce4dd75cffaaf4ea9d365dcc70/src/app/shared/table-of-contents

【参考方案2】：

解决方案分为三个部分： 1. 最右边的菜单会随着滚动而改变。这些是单击时指向同一页面上该位置的链接。

<a href="#NestedList">Nested List</a>

现在您创建实际链接。本例中的嵌套列表。

<a name="NestedList">Nested List with details </a>

现在要使用 css 或 angular 突出显示文本，您可以检查 div 是否存在于浏览器窗口中。然后从顶部开始突出显示您首先找到的任何一个。

注意： Name 和 Href 仅相差 1 个字符 #（磅）。这是必须的。