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>

编辑：

您可能希望传递offset参数而不是硬编码。

通过AJAX从后端加载数据的服务会触发“pageLoaded”事件。在我的情况下，重要的是等待页面内容完全加载，否则div将立即在视图中，并且将立即添加类。

滚动到元素时添加一个类

2 个答案: