Angularjs $anchorScroll.yOffset 不适用于 ng-sticky headers

Question

我的项目建立在 Angular Material、Angular JS 上，我使用 ngSticky 将 header 粘贴在主要 header 下方（这是一个 md-toolbar） .

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

我使用了以下代码

Angular 控制器

$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>

请注意 link 在 '<ng-include src="'XXX/XXX-links.html'"></ng-include>'

下

目前，页面滚动但不会正确定位，它会忽略粘性 header 高度。

根据 Angular JS dos, "In order for yOffset to work properly, scrolling should take place on the document's root and not some child element."

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

问题：

Unable to add add offset to the scroll which compensate header(sticky) height.

感谢帮助。

Answer 1

我找到了以下解决方案，

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

想法是在其中包含 scoll 的 div 上设置动画，而不是在父 div 上设置动画。

希望这对某人有所帮助。

Angularjs $anchorScroll.yOffset 不适用于 ng-sticky headers

Angularjs $anchorScroll.yOffset is not working for ng-sticky headers

javascript

angularjs

angular-material

sticky