Search code examples
javascriptangularjsangular-materialsticky

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

My project build on Angular Material, Angular JS and I am using ngSticky for sticking header below main header(which is a md-toolbar).

In the second header(sticky), there are bunch of button which should work as a link for scrolling to different section in same page.(Upon clicking the buttons, the page should scroll to respective section).

I used following code

Angular Controller 

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

Note that the links are under '<ng-include src="'XXX/XXX-links.html'"></ng-include>'

Currently, page scrolls but not to correct position, it ignoring the sticky header height.

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

Expected behavior : Page should scroll to exact div id.

Problem :

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

Help is appreciated.

Solution

  • I found the following solution,

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

    The idea is to animate on the div which has scoll in it, not the parent div.

    Hope this help someone.