Angularjs $anchorScroll.yOffset 不适用于 ng-sticky 标头答案

【问题标题】：Angularjs $anchorScroll.yOffset is not working for ng-sticky headersAngularjs $anchorScroll.yOffset 不适用于 ng-sticky 标头
【发布时间】：2016-04-20 13:09:44
【问题描述】：

我的项目建立在 Angular Material、Angular JS 之上，我正在使用 ngSticky 将标题粘贴在主标题下方（这是一个 md 工具栏）。

在第二个标题（粘性）中，有一堆按钮应该用作滚动到同一页面中不同部分的链接。（点击按钮后，页面应该滚动到相应部分）。

我使用了以下代码

角度控制器

$anchorScroll.yOffset = 100;  
$location.hash(anchor);
$anchorScroll();

HTML

<div sticky offset="65" media-query="min-width: 1000px" style="background-color:white; border-bottom: 1px solid #CFCFCF;">
    <ng-include src="'XXX/XXX-buttons.html'"></ng-include>
    <div class="space-top-bottom"></div>
    <ng-include src="'XXX/XXX-links.html'"></ng-include>
</div>

注意链接在'<ng-include src="'XXX/XXX-links.html'"></ng-include>'下

目前，页面滚动但不正确位置，它忽略了粘性标题高度。

根据 Angular JS dos，“为了使 yOffset 正常工作，滚动应该在文档的根而不是某个子元素上进行。”

预期行为：页面应该滚动到确切的 div id。

问题：

无法为补偿页眉（粘性）高度的滚动添加偏移量。

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angular-material sticky

【解决方案1】：

我找到了以下解决方案，

$location.hash('current-div');
$anchorScroll();
$('#scrolling-div').animate({ scrollTop: $('#current-div').position().top - $('#sticky-div').height() }, "slow");

这个想法是在其中包含 scoll 的 div 上制作动画，而不是在父 div 上。

希望这对某人有所帮助。

【讨论】：