How do I get the offset().top value of an element without using jQuery?

by

use getBoundingClientRect if $el is the actual DOM object:

var top = $el.getBoundingClientRect().top;

JSFiddle

Fiddle will show that this will get the same value that jquery’s offset top will give you

Edit: as mentioned in comments this does not account for scrolled content, below is the code that jQuery uses

https://github.com/jquery/jquery/blob/master/src/offset.js (5/13/2015)

offset: function( options ) {
    //...

    var docElem, win, rect, doc,
        elem = this[ 0 ];

    if ( !elem ) {
        return;
    }

    rect = elem.getBoundingClientRect();

    // Make sure element is not hidden (display: none) or disconnected
    if ( rect.width || rect.height || elem.getClientRects().length ) {
        doc = elem.ownerDocument;
        win = getWindow( doc );
        docElem = doc.documentElement;

        return {
            top: rect.top + win.pageYOffset - docElem.clientTop,
            left: rect.left + win.pageXOffset - docElem.clientLeft
        };
    }
}

More Related Contents:

  1. Animate scrollTop not working in firefox
  2. Update Angular model after setting input value with jQuery
  3. AngularJS + JQuery : How to get dynamic content working in angularjs
  4. ng-click not working from dynamically generated HTML
  5. How can I run a directive after the dom has finished rendering?
  6. from jquery $.ajax to angular $http
  7. What does AngularJS do better than jQuery? [closed]
  8. Accessing clicked element in angularjs
  9. jQuery .scrollTop(); + animation
  10. jQuery ui datepicker with Angularjs
  11. Changing the position of Bootstrap popovers based on the popover’s X position in relation to window edge?
  12. $(window).scrollTop() vs. $(document).scrollTop()
  13. angular.element vs document.getElementById or jQuery selector with spin (busy) control
  14. Triggering jquery with css media queries
  15. jquery – keep window from changing scroll position while prepending items to a list?
  16. Resize event firing multiple times while dragging the resize handle
  17. How to change height div on window resize?
  18. AngularJS: $viewContentLoaded fired before partial view appears
  19. How to subtract two angularjs date variables
  20. jQuery and AngularJS: Bind Events to Changing DOM
  21. Get the offset of a hidden element
  22. Problems with jQuery autocomplete + AngularJS
  23. Using jQuery’s $.ajax within an angularJS controller
  24. How to change the element of another div by clicking and hovering on an element of a different div
  25. jqGrid data stored in browser cache?
  26. $ versus jQuery
  27. jQuery dollar sign ($) as function argument?
  28. jQuery.when understanding
  29. jquery how to use multiple ajax calls one after the end of the other
  30. Toggle width with jQuery

Leave a Comment