Angularjs $ anchorScroll.yOffset funktioniert nicht für ng-sticky-Header

Question

Mein Projekt baut auf Angular Material, Angular JS auf und ich benutze ngSticky für den Header unterhalb der Haupt-Header (das ist eine MD-Toolbar).

In der zweiten Header (sticky), gibt es eine Reihe von Schaltflächen, die als Link zum Scrollen zu anderen Abschnitt auf der gleichen Seite funktionieren sollte. (Nach dem Klicken auf die Schaltflächen sollte die Seite zum entsprechenden Abschnitt scrollen).

I-Code folgenden Gebraucht

Winkelregler

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

Beachten Sie, dass die Links sind unter '<ng-include src="'XXX/XXX-links.html'"></ng-include>'

Derzeit Seite scrollt, aber nicht Position zu korrigieren, Es ignoriert die klebrige Headerhöhe.

Gemäß Angular JS dos, "Damit yOffset ordnungsgemäß funktioniert, sollte das Scrollen auf dem Stamm des Dokuments und nicht auf einem untergeordneten Element stattfinden."

Erwartetes Verhalten: Die Seite sollte nach exact div id scrollen.

Problem:

kann nicht hinzufügen, um die Scroll-Offset hinzuzufügen, die Header (klebrig) Höhe kompensieren.

Hilfe ist willkommen.

Answer 1

ich die folgende Lösung,

gefunden ist

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

Die Idee, auf dem div zu animieren, die Scoll in sich hat, nicht das übergeordnete Div.

Hoffe, dass diese jemandem helfen.