Javascript 如何计算document.ready上元素的高度？

我有一个关于粘性侧边栏的指令，页面顶部一切正常，我的问题是页脚，我需要做一些动态捕捉屏幕高度或屏幕分辨率的事情

这是我的指令

.directive('sticky', function($document, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, element) {

      var width = $document.width();

      if (width > 991) {
        $timeout(function() {
          angular.element($document).ready(function() {
            var stickySidebar = element,
                stickyHeight,
                sidebarTop,
                scrollTop,
                stickyStop,
                sidebarBottom,
                stopPosition;

            if (stickySidebar.length > 0) {
              stickyHeight = stickySidebar.height();
              sidebarTop = stickySidebar.offset().top;
            }

            $document.scroll(function() {

              if (stickySidebar.length > 0) {
                scrollTop = $document.scrollTop() + 52; //stkicy responds to the navbar
                if (sidebarTop < scrollTop) {
                  stickySidebar.css('top', scrollTop - sidebarTop);
                  sidebarBottom = stickySidebar.offset().top + stickyHeight;
                  stickyStop = $('.main-content').offset().top + $('.main-content').height();
                  if (stickyStop < sidebarBottom) {
                    stopPosition = $('.main-content').height() - stickyHeight;
                    stickySidebar.css('top', stopPosition);
                  }
                }
                else {
                  stickySidebar.css('top', '0');
                }
              }
            });

            $document.resize(function() {
              if (stickySidebar.length > 0) {
                stickyHeight = stickySidebar.height();
              }
            });
          });

        }, 1000);

      }else {
        console.log('do not apply function because the size is not the proper one');
      }
    }
  };
});

指令（'sticky'，函数（$document，$timeout）{ 返回{ 限制：“A”， 链接：功能（范围、元素）{ var width=$document.width（）； 如果（宽度>991）{ $timeout（函数（）{ 元素（$document）.ready（函数（）{ var stickySidebar=元素， 粘性高度， 塞德巴托普， 滚动顶， 粘滞停止， 舷窗， 停止； 如果（stickySidebar.length>0）{ stickyHeight=stickySidebar.height（）； sidebarTop=stickySidebar.offset（）.top； } $document.scroll（函数（）{ 如果（stickySidebar.length>0）{ scrollTop=$document.scrollTop（）+52；//stkicy响应导航栏 if（侧栏顶部<滚动顶部）{ css（'top'，scrollTop-sidebarTop）； sidebarBottom=stickySidebar.offset（）.top+stickyHeight； stickyStop=$（'.main content'）.offset（）.top+$（'.main content'）.height（）； if（粘滞停止<侧边栏）{ stopPosition=$（'.main content'）.height（）-粘滞高度； css（'top'，stopPosition）； } } 否则{ css（'top'，'0'）； } } }); $document.resize（函数（）{ 如果（stickySidebar.length>0）{ stickyHeight=stickySidebar.height（）； } }); }); }, 1000); }否则{ log（'不应用函数，因为大小不正确'）； } } }; }); 看看这里的图片，这是正确的行为，但是在一个非常大的分辨率屏幕上，正如你所看到的，下面的红色标签是我想要给每个分辨率屏幕的边距

这是13英寸笔记本电脑中的一款

---

如您所见，没有边距，因此如果左侧的粘滞元素与屏幕的高度相同，则该元素不起作用。我希望在每个分辨率上都提供与第一张图像相同的边距，如何使用我的指令实现这一点？

这必须在文档上。准备好了吗？不能在窗口上。加载？好的，是的，但我如何实现？@ntgCleanerno p在angular指令中使用

ready

。链接函数在元素首先存在之前不会运行，angular本身在

ready

之后也不会操作DOM