modules/yangui-resources/src/main/resources/yangui/directives/sticky.directive.js

   1 define(['app/yangui/yangui.module'], function(yangui) {\r
   2 \r
   3     yangui.register.directive('sticky', ['$timeout', function($timeout){\r
   4         return {\r
   5             restrict: 'A',\r
   6             scope: {\r
   7                 offset: '@',\r
   8             },\r
   9             link: function($scope, $elem, $attrs){\r
  10                 $timeout(function(){\r
  11                     var offsetTop = $scope.offset || 0,\r
  12                         $window = angular.element(window),\r
  13                         doc = document.documentElement,\r
  14                         initialPositionStyle = $elem.css('position'),\r
  15                         stickyLine,\r
  16                         scrollTop,\r
  17                         randomNum = Math.floor((Math.random() * 1000) + 1),\r
  18                         $wrapper = $('<div class="sticky-element'+randomNum+' mt20"></div>');\r
  19 \r
  20 \r
  21                     // Set the top offset\r
  22                     //\r
  23                     $elem.css('top', offsetTop+'px');\r
  24 \r
  25 \r
  26                     // Get the sticky line\r
  27                     //\r
  28                     function setInitial(){\r
  29                         $elem.addClass('not-sticky');\r
  30                         $elem.wrap($wrapper);\r
  31                         getStickyLine();\r
  32                         checkSticky();\r
  33                     }\r
  34 \r
  35                     function getStickyLine(){\r
  36                         //stickyLine = $elem[0].offsetTop - offsetTop;\r
  37                         stickyLine = $($elem).offset().top - offsetTop;\r
  38                     }\r
  39 \r
  40                     // Check if the window has passed the sticky line\r
  41                     //\r
  42                     function checkSticky(){\r
  43                         scrollTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);\r
  44                         // $('.sticky-element'+randomNum).css('height', parseInt($elem.css('height')) === 0 ? 'auto' : $elem.css('height'));\r
  45 \r
  46                         if ( scrollTop >= stickyLine ){\r
  47                             $elem.css('position', 'fixed').removeClass('not-sticky').addClass('is-sticky');\r
  48                             $('.sticky-element'+randomNum).css('height', parseInt($elem.css('height')) === 0 ? 'auto' : $elem.css('height'));\r
  49 \r
  50                         } else {\r
  51                             $elem.css('position', initialPositionStyle).removeClass('is-sticky').addClass('not-sticky');\r
  52                             $('.sticky-element'+randomNum).css('height','auto');\r
  53                         }\r
  54 \r
  55                         var _ = $elem.hasClass('not-sticky') ? getStickyLine() : null;\r
  56 \r
  57                     }\r
  58 \r
  59 \r
  60                     // Handle the resize event\r
  61                     //\r
  62                     function resize(){\r
  63                         $elem.css('position', initialPositionStyle);\r
  64                         $timeout(setInitial);\r
  65                     }\r
  66 \r
  67 \r
  68                     // Attach our listeners\r
  69                     //\r
  70                     $window.on('scroll', checkSticky);\r
  71                     $window.on('resize', resize);\r
  72                     \r
  73                     setInitial();\r
  74                 });\r
  75             },\r
  76         };\r
  77     }]);\r
  78 });