首页 文章

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

提问于
浏览 次
1

我的项目 Build 在Angular Material，Angular JS上，我正在使用ngSticky将 Headers 粘贴在主 Headers 下面（这是一个md工具栏） .

在第二个 Headers （粘性）中，有一堆按钮，它应该作为滚动到同一页面中不同部分的链接 . （单击按钮时，页面应滚动到相应的部分） .

我使用以下代码

角度控制器

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

目前，页面滚动而不是正确的位置，它忽略了粘性 Headers 高度 .

根据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 .

问题：

无法向滚动添加添加偏移，以补偿 Headers （粘性）高度 .

感谢帮助 .

javascript angularjs angular-material sticky

1 回答

  • 0

    我找到了以下解决方案，

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

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

    希望这能有所帮助 .

    回复于

相关问题