我想在元素中添加一个类,当它在视图中滚动到a.k.a时,但我不知道从哪里开始。
我想说我想将它添加到<div></div>
块,当它滚动到它时,该类将被添加,当它滚动出来时,该课程将被删除。
我会提供一些html标记来应用它,但我认为<div></div>
标签上的演示是令人满意的。
答案 0 :(得分:2)
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。
答案 1 :(得分:1)
我在我的一个网站上以这种方式解决了这个问题。
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将立即在视图中,并且将立即添加类。