角度通过id获取元素的偏移量

Posted

技术标签:

【中文标题】角度通过id获取元素的偏移量【英文标题】:Angular get offset of element by id 【发布时间】:2016-02-25 22:04:48 【问题描述】:

当我当前观看相应部分时,我尝试将导航栏 li 对象设置为活动状态。 换句话说:当滚动浏览我的页面(包含多个部分的单页)时,我正在观看的部分应在导航栏中突出显示。

我已经通过指令获得了滚动位置。我失败的地方是在 .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(不是 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;
    ;
  );

在 body 之后我使用 span

<span scroll-position="scrollPos"></span>

初始化我的“scrollPosition”指令,它允许我访问 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>

我希望这可以帮助那些像我一样在同一问题上苦苦挣扎的人。问候

【问题讨论】:

我希望帮助这个链接***.com/questions/18953144/… 【参考方案1】:

你可以试试这样的:

$(document).scrollTop() > document.getElementById('something').offset().top

(警告 - 我现在没时间测试 - 但稍后会)

我还建议保存所有元素的 Y 位置以供参考,而不是每次都进行此计算

【讨论】:

由于我使用的部分可以扩展并使其高度加倍,因此保存 Y 位置可能不是一个好主意。我会尽快测试您的建议。 @Ore 一定要告诉我你的进展,因为如果你到那时还没有解决它,我希望今晚有时间扩展它 感谢您的解决方案。我没有像@Sharikov Vladislav 所说的那样对其进行测试,因为在 Angular 中使用纯 jQuery 并不好。 同意他的解决方案是 Angular 的更好方法,而我的目标是让您的 jQuery 解决方案正常工作【参考方案2】:

使用 .offset() 获取元素到文档顶部的距离:

angular.element(("li .active").offset().top

【讨论】:

通过这个你试图在整个文档中找到元素,而不是在需要的元素中。【参考方案3】:

不不不。错误的!当你使用 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)pure jQuery

【讨论】:

谢谢。我知道这不好,但我错过了像你的方法这样的东西。事实上,您的解决方案效果很好,非常感谢。我会在完全实施后立即发布答案。 为什么觉得这样不好?在 angularJS 中使用纯 jQuery 并不好 :) $element 的另一个优点 - 您不需要在完整文档中搜索,只在带有 ng-controller 的元素中搜索。 我用完整的解决方案编辑了我的问题。是的,这就是我的意思。在 Angular 应用程序中使用纯 js 总是会导致问题。这是我的经验。

以上是关于角度通过id获取元素的偏移量的主要内容,如果未能解决你的问题,请参考以下文章

如何正确获取 DOM 元素的位置偏移量? [复制]

使用动画移动时获取元素的偏移量

获取与窗口相关的元素顶部偏移量

javascript 获取内联元素的偏移量

获取元素相对于父容器的位置/偏移量?

获取页面中任意一个元素距离body的偏移量