javascript - Angular get offset of element by id

I try to set the navbar li object to active when i currently watch the corresponding section. In other words: When scrolling through my page (single page with multiple sections), the section i'm watching should be highlighted in the navbar.

I already got the scrolling position via directive. Where I fail is to trigger ng-class on the .nav ul li.

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

I doesn't make any difference when I use

ng-class="{'active': $parent.scrollPos > angular.element('#something').offset()}"

How do I get the distance from document-top of any element?

Thanks a lot.

PS: I use jQuery (not lite)!

EDIT How it works (Thanks to @Sharikov Vladislav): On body I use the "PageCtrl":

<body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl">

which looks like that:

angular.module('previewApp')
  .controller('PageCtrl', function($scope, $element) {
    $scope.scrollPos = 0;
    $scope.getOffset = function (elementId) {
      var element = $element.find(elementId);      
      return element.offset().top;
    };
  });

Right after the body I use a span

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

to initialise my "scrollPosition"-directive, which allows me to access the current scroll position over the $scope.scrollPos in PageCtrl. Directive:

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();
      }
    };
  });

In my .nav ul li looks like the following. The "- 150" is for a more acurate highlighting.

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

I hope this helps somebody out there who is struggling over the same problem like me. Greets

I already got the scrolling position via directive. Where I fail is to trigger ng-class on the .nav ul li.

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

I doesn't make any difference when I use

ng-class="{'active': $parent.scrollPos > angular.element('#something').offset()}"

How do I get the distance from document-top of any element?

Thanks a lot.

PS: I use jQuery (not lite)!

EDIT How it works (Thanks to @Sharikov Vladislav): On body I use the "PageCtrl":

<body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl">

which looks like that:

angular.module('previewApp')
  .controller('PageCtrl', function($scope, $element) {
    $scope.scrollPos = 0;
    $scope.getOffset = function (elementId) {
      var element = $element.find(elementId);      
      return element.offset().top;
    };
  });

Right after the body I use a span

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

to initialise my "scrollPosition"-directive, which allows me to access the current scroll position over the $scope.scrollPos in PageCtrl. Directive:

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();
      }
    };
  });

In my .nav ul li looks like the following. The "- 150" is for a more acurate highlighting.

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

I hope this helps somebody out there who is struggling over the same problem like me. Greets

Share edited Nov 24, 2015 at 9:24 asked Nov 23, 2015 at 17:37 Ore 1,0322 gold badges14 silver badges25 bronze badges

i hope help this link stackoverflow./questions/18953144/… – Mukesh Kumar Bijarniya Commented Nov 23, 2015 at 17:46

Add a ment |

3 Answers 3

Sorted by: Reset to default 8

No no no. Wrong! You should not use jQuery, when you are using AngularJS. Inject $element service in your controller:

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>

You have not to use $(document) or pure jQuery in AngularJS at all.

you could try something like:

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

(caveat - I havent' time to test right now - but will later)

I would also suggest saving all your element's Y positions to refer to rather than doing this calculation each time

Use .offset() to get the distance between an element and the top of the document:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular get offset of element by id - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)