Làm thế nào để có được giá trị trên() của một phần tử không sử dụng jQuery?

Question

Tôi đang lập trình một ứng dụng một trang bằng khung công tác Góc. Tôi mới làm quen với nó. Tôi đã đọc this guide để giúp tôi hiểu những khác biệt cơ bản giữa jQuery và Angular và tôi muốn làm theo hướng dẫn này càng nhiều càng tốt và KHÔNG sử dụng jQuery.

Ngoại trừ jQuery giúp giải quyết một số tính không tương thích của trình duyệt và cung cấp thư viện chức năng hữu ích, như có thể biết vị trí trên cùng của phần tử từ đầu cửa sổ, như trong $('element').offset().top. Không có Javascript đơn giản dường như có thể đến gần mà không cần viết lại chức năng này, tại thời điểm nào không phải là nó là một ý tưởng tốt hơn để sử dụng thư viện jQuery hoặc jQuery?

Cụ thể, những gì tôi đang cố gắng là thiết lập một chỉ thị sửa một phần tử tại vị trí khi đầu nó được cuộn đến một vị trí nhất định trong cửa sổ. Dưới đây là hình thức:

directives.scrollfix = function() { 
    return { 
     restrict: 'C', 
     link: function (scope, element, $window) { 

      var $page = angular.element(window) 
      var $el = element[0] 
      var elScrollTopOriginal = $($el).offset().top - 40 

      $page.bind('scroll', function() { 

       var windowScrollTop = $page[0].pageYOffset 
       var elScrollTop  = $($el).offset().top 

       if (windowScrollTop > elScrollTop - 40) { 
        elScrollTopOriginal = elScrollTop - 40 
        element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px'); 
       } 
       else if (windowScrollTop < elScrollTopOriginal) { 
        element.css('position', 'relative').css('top', '0').css('margin-left', '0'); 
       } 
      }) 

     } 
    } 
} 

Nếu có cách nào tốt hơn để đạt được điều này trong góc mà tôi vẫn chưa nhận được, tôi xin đánh giá cao lời khuyên.

Answer 1

sử dụng getBoundingClientRect nếu $el là đối tượng DOM thực tế:

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

JSFiddle

Fiddle sẽ hiển thị rằng điều này sẽ nhận được giá trị tương tự mà jquery bù đắp hàng đầu sẽ cung cấp cho bạn

Chỉnh sửa: như đã đề cập trong nhận xét, điều này không tính đến nội dung được cuộn, bên dưới là mã thứ tại jQuery sử dụng

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

Answer 2

giải pháp chấp nhận bởi Patrick Evans không mất di chuyển vào tài khoản. tôi đã hơi thay đổi jsfiddle của mình để chứng minh điều này:

css: thêm một số chiều cao ngẫu nhiên để đảm bảo chúng tôi có một số không gian để di chuyển

body{height:3000px;} 

js: thiết lập một số vị trí cuộn

jQuery(window).scrollTop(100); 

kết quả là hai giá trị được báo cáo khác nhau bây giờ: http://jsfiddle.net/sNLMe/66/

CẬP NHẬT 14 tháng 2 năm 2015

có yêu cầu kéo để chờ jqLite, bao gồm phương thức bù của riêng nó (chú ý đến vị trí cuộn hiện tại). hãy xem nguồn trong trường hợp bạn muốn tự mình triển khai: https://github.com/angular/angular.js/pull/3799/files

Answer 3

Bạn có thể thử phần tử [0] .scrollTop, theo ý kiến ​​của tôi, giải pháp này nhanh hơn.

Ở đây bạn có ví dụ lớn hơn - http://cvmlrobotics.blogspot.de/2013/03/angularjs-get-element-offset-position.html

Answer 4

Có vẻ bạn chỉ có thể sử dụng phương pháp prop trên các yếu tố góc:

var top = $el.prop('offsetTop'); 

trình cho tôi. Có ai biết bất kỳ nhược điểm này?

Answer 5

Đây là một chức năng mà sẽ làm điều đó mà không cần jQuery:

function getElementOffset(element) 
{ 
    var de = document.documentElement; 
    var box = element.getBoundingClientRect(); 
    var top = box.top + window.pageYOffset - de.clientTop; 
    var left = box.left + window.pageXOffset - de.clientLeft; 
    return { top: top, left: left }; 
}