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

时间:2015-03-04 18:18:56

标签: javascript css angularjs user-experience

我有一个针对粘性侧边栏的指令,页面顶部的一切正常,我的问题是在页脚上,我需要做一些动态捕捉屏幕高度或屏幕分辨率的东西

这是我的指示

.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');
      }
    }
  };
});

在这里查看图像,这是正确的行为,但在一个非常大的分辨率屏幕中,你可以看到下面的红色标签是我想给每个分辨率屏幕的边距

enter image description here

这是13“笔记本电脑中的那个

enter image description here

你可以看到没有边距所以左边的Sticky元素如果与屏幕的高度相同则不起作用,我想在每个分辨率上给出与第一张图像相同的边距,如何我可以用我的指令吗?

0 个答案:

没有答案