如何在angularjs中修復滾動邊欄（右/左）像Facebook一樣

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

如何使用文件..

只要把目錄rightside /萊夫特賽德酒吧裏像下面。

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。