角度材料 - 词缀

Question

我正在使用角度为4的角度材料2.0.0-beta.12。

我希望在angular material website

上实现一些名为“affix~”的东西

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

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

任何人都知道一种简单而干净的方法吗？

提前感谢您的时间。

Answer 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

Answer 2

解决方案分为三个部分： 1.最右边的菜单，在滚动时更改。点击这些链接指向同一页面上的那个位置。

timestamp

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

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

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

  

注意：名称和Href的差异仅为1个字符＃（磅）。这是必要的。