javascript - 仅当 div 被隐藏时，如何在 div 上使用 angularjs $anchorScroll？

Question

我正在使用 angularjs 开发 Web 应用程序。我有几个嵌套的 div。它们中的每一个都对应于用户可以选择的元素。
我的 div 显示的一个很好的例子在官方的 angularJs 文档中:
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview

在我的代码中，每个 div 都有一个 ng-click="gotoAnchor(x)" 事件，所以当我点击一个 div 时，如果它是部分隐藏，它将它拉到页面上，用户可以看到所有点击的 div。
但是我的页面中有一个标题，所以第一个带有 anchor 和点击事件的 div 不直接位于页面顶部。如果我点击第一个 div，它将滚动并且标题将不可见。

所以我的问题是，只有当 div 没有完全显示在屏幕上时，是否有办法激活 anchor ？

如果您有除 anchor 之外的其他解决方案，我接受。

提前谢谢你。

Answer 1

如果我正确理解您的问题，问题是当使用 $anchorScroll 时，您的 header 要么是

a:被滚动到frame中的div覆盖，

或

b 部分覆盖滚动到框架中的 div。

无论哪种方式，您都应该查看两种解决方案:

首先

确保您使用 CSS 正确地对您的元素进行分层，您的 header (如果固定的话)应该有一个 z-index 来取代您的 div。

.header  { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}

记住 Z-index 仅适用于位置元素(参见 ref )

第二

使用 $anchorScroll.yOffset 确保您的滚动距离降低以补偿标题高度。如 Angular 文档中所示，您可以在应用程序中使用此方法:

.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])

将 50 更新为标题的像素高度。

关于可见性

有一些很棒的库和指令可用于检查元素的可见性 - 试试 https://github.com/thenikso/angular-inview因为您可以指定是否要在只有顶部、底部或没有任何 div 可见时启用操作。

注意 将第一个 div 正确放置在页面上将避免任何必要的滚动，如本 plunkr 中所示.