Ore*_*Ore 3 javascript jquery angularjs
当我正在观看相应的部分时,我尝试将导航栏对象设置为活动状态.换句话说:当滚动浏览我的页面(包含多个部分的单页)时,我正在观看的部分应该在导航栏中突出显示.
我已经通过指令得到了滚动位置.我失败的地方是在.nav ul li上触发ng-class.
<li class="" ng-class="{'active': $parent.scrollPos > document.getElementById('something').offset()}">
<a class="" ng-click="isCollapsed = true" href="#something" du-smooth-scroll>Something</a>
</li>
我使用时没有任何区别
ng-class="{'active': $parent.scrollPos > angular.element('#something').offset()}"
如何从任何元素的文档顶部获取距离？
非常感谢.
PS:我使用jQuery(不是精简版)!
编辑 如何工作(感谢@Sharikov Vladislav):在身体上我使用"PageCtrl":
<body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl">
看起来像那样:
angular.module('previewApp')
.controller('PageCtrl', function($scope, $element) {
$scope.scrollPos = 0;
$scope.getOffset = function (elementId) {
var element = $element.find(elementId);
return element.offset().top;
};
});
在身体后我使用跨度
<span scroll-position="scrollPos"></span>
初始化我的"scrollPosition"-directive,它允许我访问PageCtrl中$ scope.scrollPos上的当前滚动位置.指示:
angular.module('previewApp')
.directive('scrollPosition', function ($window) {
return {
scope: {
scrollPos: "=scrollPosition"
},
link: function (scope, element, attrs) {
var windowElement = angular.element($window);
var handler = function () {
scope.scrollPos = windowElement.scrollTop();
}
windowElement.on('scroll', scope.$apply.bind(scope, handler));
handler();
}
};
});
在我的.nav ul li中如下所示." - 150"用于更精确的突出显示.
<div class="navbar-collapse" uib-collapse="isCollapsed" id="menu-center">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li ng-class="{'active': $parent.scrollPos > $parent.getOffset('#section1') - 150 && $parent.scrollPos < $parent.getOffset('#section2') - 150}">
<a ng-click="isCollapsed = true" href="#section1" du-smooth-scroll>Section1</a>
</li>
<li ng-class="{'active': $parent.scrollPos > $parent.getOffset('#section2') - 150 && $parent.scrollPos < $parent.getOffset('#section3')}">
<a ng-click="isCollapsed = true" href="#section2" du-smooth-scroll>Section2</a>
</li>
</ul>
</div>
我希望这能帮助那些像我一样在同一个问题上挣扎的人.电贺
不不不.错误!当您使用AngularJS时,不应该使用jQuery.$element在控制器中注入服务:
JavaScript的:
myCtrl.$inject = ['$scope', '$element'];
function myCtrl($scope, $element) {
var element = $element.find('#someId');
$scope.getOffset = function () {
return element.offset().top;
};
}
HTML:
<div ng-class='{ "active": getOffset() > xxx }'></div>
你根本不需要在AngularJS 中使用$(document)或使用纯 jQuery .