用id求元素的角偏移
当我当前观看相应的部分时，我尝试将navbar li对象设置为active。换句话说:当滚动我的页面(包含多个部分的单个页面)时，我所观察的部分应该在导航栏中突出显示。
我已经通过指令得到了滚动的位置。我失败的地方是在.nav ul li上触发ng类。
<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 (不是lite)！
编辑它的工作方式(感谢@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>我希望这能帮助像我这样为同样问题而奋斗的人。问候
回答 3
Stack Overflow用户
发布于 2015-11-23 19:56:27
不不不。不对!当您使用jQuery时，不应该使用AngularJS。在控制器中注入$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>您根本不必在$(document)或纯jQuery中使用AngularJS。
Stack Overflow用户
发布于 2015-11-23 17:48:30
你可以尝试这样的方法：
$(document).scrollTop() > document.getElementById('something').offset().top(请注意--我现在没有时间测试，但以后会的)
我还建议保留所有元素的Y位置以供参考，而不是每次进行这种计算。
Stack Overflow用户
发布于 2015-11-23 17:53:16
使用.offset()获取元素与文档顶部之间的距离：
angular.element(("li .active").offset().tophttps://stackoverflow.com/questions/33877153
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号