Question

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

我已经通过指令得到了滚动位置。我失败的地方是在.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）：在身体上我使用＆＃34; PageCtrl＆＃34;：

<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>

初始化我的＆＃34; scrollPosition＆＃34; -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中如下所示。＆＃34; - 150＆＃34;是一个更精确的突出显示。

<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>

我希望这可以帮助那些在像我这样的问题上挣扎的人。迎接

Answer 1

不不不。错误！当您使用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。

Answer 2

使用.offset（）获取元素与文档顶部之间的距离：

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

Angular通过id获取元素的偏移量

2 个答案: