https://atletiq.com/panel/assets/angular_app/directives/rm-affix.js

1'use strict';
2//тестtest
3angular.module('atletiqApp')
4.directive('uiScrollfix', [
5  '$window', '$rootScope',
6  function ($window, $rootScope) {
7    'use strict';
8    function getWindowScrollTop() {
9      if (angular.isDefined($window.pageYOffset)) {
10      	//console.log('pageYOffset', $window.pageYOffset);
11        return $window.pageYOffset;
12      } else {
13        var iebody = document.compatMode && document.compatMode !== 'BackCompat' ? document.documentElement : document.body;
14        return iebody.scrollTop;
15      }
16    }
17    return {
18      require: '^?uiScrollfixTarget',
19      link: function (scope, elm, attrs, uiScrollfixTarget) {
20		  
21  		  // added to fix menu
22  		  var elemTop = 0;
23  	  	var elemHeight = 0;
24        /*
25    		scope.$on('$includeContentLoaded', function() {
26    			elemTop = elm[0].getBoundingClientRect().top;
27    			elemHeight = elm[0].getBoundingClientRect().height;
28                console.log(elm[0].offsetTop+' loaded');
29    		 })*/
30             
31    	  	////////////////
32		
33		
34        var top = elm[0].getBoundingClientRect().top;
35        var $target = uiScrollfixTarget && uiScrollfixTarget.$element || angular.element($window);
36
37        //console.log(elm[0].getBoundingClientRect());
38        // console.log('top=', top);
39        if (!attrs.uiScrollfix) {
40          attrs.uiScrollfix = top;
41        } else if (typeof attrs.uiScrollfix === 'string') {
42          // charAt is generally faster than indexOf: http://jsperf.com/indexof-vs-charat
43          if (attrs.uiScrollfix.charAt(0) === '-') {
44            attrs.uiScrollfix = top - parseFloat(attrs.uiScrollfix.substr(1));
45          } else if (attrs.uiScrollfix.charAt(0) === '+') {
46            attrs.uiScrollfix = top + parseFloat(attrs.uiScrollfix.substr(1));
47          }
48          // console.log('attrs.uiScrollfix = ', attrs.uiScrollfix)
49        }
50        
51        function onScroll() {
52          elemTop = (!elemTop)?top:elemTop;
53          
54          if (!elemHeight){
55            //console.log('elem height');
56            elemHeight = elm[0].getBoundingClientRect().height;
57          } 
58
59          $rootScope.affixHeight = elemHeight;
60          // if pageYOffset is defined use it, otherwise use other crap for IE
61          var offset = uiScrollfixTarget ? $target[0].scrollTop : getWindowScrollTop();
62          
63          /*
64          var i = 0,
65              iOS = false,
66              iDevice = ['iPad', 'iPhone', 'iPod'];
67
68          for ( ; i < iDevice.length ; i++ ) {
69              if( navigator.platform === iDevice[i] ){ iOS = true; break; }
70          }
71          
72          if (!iOS){
73            var width = elm[0].parentNode.offsetWidth;
74          } else {
75            var width = screen.width;
76          }*/
77          
78          //console.log('pageYOffset', offset, elemTop, elm[0].offsetTop);
79
80          if (!elm.hasClass('ui-scrollfix') && offset > elemTop) {
81            //console.log(offset, elemTop);
82            elm.addClass('ui-scrollfix');
83            $('#top-navbar').addClass('headroom--unpinned');
84            $('#top-navbar').removeClass('headroom--pinned');
85            //document.body.style.paddingTop = elemHeight+'px';
86            $('.container-main').css('paddingTop', elemHeight+'px');
87
88          } else if (elm.hasClass('ui-scrollfix') && offset < elemTop) {
89            elm.removeClass('ui-scrollfix');
90
91            $('#top-navbar').addClass('headroom--pinned');
92            $('#top-navbar').removeClass('headroom--unpinned');
93
94            //document.body.style.paddingTop = '0';
95            //console.log(elemHeight);
96            $('.container-main').css('paddingTop', '0');
97            //$('.container-main').style.paddingTop = '0';
98          }
99
100          
101          //console.log($('#app-inside').width());
102          // Ширина по самому главному родителю
103          // var width = document.getElementById('app-inside').clientWidth;
104          
105          var parentElm = elm[0].parentNode;          
106          var b = window.getComputedStyle(parentElm);
107          //console.log(b.paddingLeft, parseInt(b.paddingRight), b.width);
108          var width = parentElm.clientWidth - parseInt(b.paddingLeft) - parseInt(b.paddingRight);
109          elm[0].style.width = width + 'px';
110          
111          //elm[0].style.clientWidth = width;
112          
113          //scope.$parent.parentWidth = 'width:' + width + 'px !important' ;
114          
115          // console.log('elm[0].offsetWidth', elm[0].offsetWidth, scope);  
116          //$(elm).css('width', width + "px");        
117
118        }
119        var w = angular.element($window);
120        w.bind('resize', function () {
121          onScroll();
122        });
123
124        $target.on('scroll', onScroll);
125        // Unbind scroll event handler when directive is removed
126        scope.$on('$destroy', function () {
127          $target.off('scroll', onScroll);
128        });
129      }
130    };
131  }
132]).directive('uiScrollfixTarget', [function () {
133    'use strict';
134    return {
135      controller: [
136        '$element',
137        function ($element) {
138          this.$element = $element;
139        }
140      ]
141    };
142  }]);