2016-04-20 4 views
1

Мой проект построен на угловом материале, угловой JS, и я использую ngSticky для прикрепления заголовка ниже основного заголовка (который является панелью md-toolbar).

Во втором заголовке (липкой) есть кнопка кнопки, которая должна работать как ссылка для прокрутки в другой раздел на той же странице. (При нажатии на кнопки страница должна прокручиваться до соответствующего раздела).

Я использовал следующий код

Угловая контроллер

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

В настоящее время страница прокручивается, но не исправить положение, он игнорирует липкую высоту заголовка.

В соответствии с Угловым JS dos «Для правильной работы yOffset прокрутка должна выполняться в корне документа, а не в каком-либо дочернем элементе».

Ожидаемое поведение: Страница должна прокручиваться до точного идентификатора div.

Проблема:

Невозможно добавить надстройку смещения свитка, которые компенсируют заголовок (липкая) высоту.

Справка приветствуется.

ответ

0

я нашел следующее решение,

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

Идея заключается в том, чтобы оживить на DIV, который имеет scoll в нем, а не родительский DIV.

Надеюсь, что это поможет кому-то.