Как прокрутить какой-то другой элемент или заголовок после прокрутки тела размером 40 пикселей (n пикселей) - PullRequest
Новая
       2

Как прокрутить какой-то другой элемент или заголовок после прокрутки тела размером 40 пикселей (n пикселей)

0 голосов
/ 24 июня 2018

Я хочу прокрутить заголовок медленнее, чем скорость прокрутки тела. 

<body>
    <div class="header">
          Header will be scroll after 40px scrolling of body
    </div>
    <div class="container">
        ...
        ...  (this content will scroll with normal scrolling speed.)
        ...
        <div class="el1">
             This div will scroll after 50% scrolling of body with slow speed
        </div>
        ...
        ...
        ...

    </div>
</body>

Как мне этого добиться?С использованием javascript или css в приложении angularjs?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

У меня был похожий вариант использования в проекте, над которым я работаю, я решил его с помощью этой библиотеки.

https://github.com/harm-less/angular-sticky

Надеюсь, это полезно, Ура! * * 1006

0 голосов
/ 24 июня 2018

Вы можете установить класс, который будет применять фиксированные стили к заголовку. 

<div class="header" ng-class="{'fixed-header': showFixedHeader}">
      Header will be scroll after 40px scrolling of body
</div>

В вашем контроллере вы должны добавить слушателя к телу для отслеживания события прокрутки 

angular.element(document.body).addEventListener('scroll', function(event) {
    var scrollTop = document.documentElement.scrollTop;

    if (scrollTop > 40) {
        $scope.showFixedHeader = true;
    } else if (scrollTop < 40) {
        $scope.showFixedHeader = false;
    }
}, false);

}); 

.fixed-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...