Question

我是Angulajs的新手，我很挣扎，花了很多时间来建立固定的右侧目录。

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

我想和你一起贡献我的代码以回答我的回答。

Answer 1

所需文件 1）jQuery 2）Angularjs

directories.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>

随时问我任何问题。谢谢， Ronak Amlani。

如何在angularjs中像facebook一样修复滚动侧边栏（右/左）

1 个答案: