如何在 Angularjs 中修复像 Facebook 一样的滚动侧边栏(右/左)

Question

我是Angulajs的新手，我挣扎并花费大量时间来构建固定的右侧目录。

这是我对固定滚动目录的功能。1）如果侧边栏（右/左侧边栏）很大，那么屏幕，所以它不应该粘在屏幕上，直到它到达底部。2）一旦我们向下滚动并到达部分底部，它应该像胶水一样粘在屏幕（固定侧边栏）中。3）一旦我们从下到上滚动并且我们到达该部分的实际底部空间，应该正常滚动剩余部分。

我想和你一起贡献我的代码来回答我正在给出答案。

Answer 1

必需的文件1） jQuery2） Angularjs

目录.js

angular.module('myApp').directive('setClassWhenAtTop', function ($window) {
    var $win = angular.element($window); // wrap window object as jQuery object
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            if(!$(element).attr('style') )
            {
              $(element).width($(element).outerWidth());
              $(element).css('bottom',0);
            }
            var win_height = $(window).height();
            var topClass = attrs.setClassWhenAtTop; // get element's top relative to the document
            var offsetTop = $(element).offset().top

            $win.on('scroll', function (e) {
                var ele_height = $(element).height();
                if( ele_height > win_height )
                {
                  var scroll_top = $(window).scrollTop();
                  var shouldFix = (offsetTop+ele_height)-(scroll_top+win_height);
                  console.log(shouldFix);
                  console.log(scroll_top +">="+offsetTop);
                  if( shouldFix < 0 && scroll_top >= offsetTop )
                  {
                    element.addClass(topClass);
                  }
                  else
                  {
                    element.removeClass(topClass);
                  }
                }
                else
                {
                  if ( scroll_top >= offsetTop ) {
                      element.addClass(topClass);
                  } else {
                      element.removeClass(topClass);
                  }
                }
            });
        }
    };
});

如何使用文件..

只需将目录放在右侧/左侧栏中，如下所示。

set-class-when-at-top="p-f" where p-f{position:fixed;}

这意味着代码将看起来像什么东西

<div class="left">
    </div>
    <div class="right">
       <div class="width-100" set-class-when-at-top="p-f" >
sdfsfdfs
</div>
    </div>

随时问我任何问题。谢谢罗纳克·阿姆拉尼。