Добавьте класс при прокрутке к элементу

Question

Я хотел бы добавить класс к элементу, когда он находится в поле зрения, прокручивается a.k.a, но я не знаю, с чего начать.

Предположим, я хочу добавить его в блок <div></div>, и когда он будет прокручен к нему, класс будет добавлен, и когда он будет прокручен, класс будет удален.

Я бы предоставил некоторую метку html, чтобы применить ее, но я думаю, что демонстрация на тегах <div></div> - это удовлетворительно работать.

Answer 1

ui-scroll модуль добавляет класс при прокрутке элемента. Вы можете разветвить его и приспособиться к вашим потребностям.

---

Возможно, вы уже знаете; Есть также много плагинов JQuery для этого, и это довольно легко обернуть этот вид плагина с директивой:

angular.module('testApp', []) 
    .directive('onScrollAddClass', function() { 
    return { 
     link: function(scope, elm, attr) { 

     init(elm, attr.onScrollAddClass); 

     function init(elm, cls) { 
      elm.viewportChecker({ 
      classToAdd: cls, 
      repeat: true 
      }); 
     } 
     } 
    } 
    }); 

Вот the demo для приведенного выше кода.

Answer 2

Я решил это так на одном из моих сайтов.

angular.module("Directives") 

.directive("rjOnScrollTo", [ 
"scroll", "$window", "$rootScope", 
function(scroll, $window, $rootScope) { 
    function link($scope, $element) { 
    var offset = 100; 
    var pageLoaded = false; 
    var uniqueId = "rjOnScrollTo_" + $element.get(0).id; 

    var onScroll = function() { 
     if (pageLoaded && $window.scrollTop() + $window.height() - offset >= $element.offset().top) { 
     $element.addClass($scope.className); 
     scroll.removeCallback($window, uniqueId); 
     } 
    }; 

    scroll.addCallback($window, uniqueId, onScroll); 

    $scope.$on("$destroy", function() { 
     scroll.removeCallback($window, uniqueId); 
    }); 

    $scope.$on("$routeChangeSuccess", function() { 
     pageLoaded = false; 
    }); 

    $scope.$on("pageLoaded", function() { 
     pageLoaded = true; 
     onScroll(); 
    }); 
    } 

    return { 
    link: link, 
    restrict: "A", 
    scope: { 
     "className": "@rjOnScrollTo" 
    } 
    }; 
}]); 

Использование так:

<div data-rj-on-scroll-to="my-class"></div> 

Edit:

Вы можете передать параметр смещения в, а не жестко закодировать его.

Служба, которая загружает данные с внешнего сервера через AJAX, запускает событие «pageLoaded». В моем случае было важно дождаться, когда содержимое страницы будет полностью загружено, иначе div будет сразу же рассмотрен, и класс будет добавлен сразу.