特定の距離をスクロールされるとトップで要素を固定する

angular-directive.js

(function() {
  'use strict';

  angular.module('app').directive('fixedOnTop', function($window) {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        angular.element($window).on('scroll', function() {
          var baseTop = element.get(0).offsetTop;
          if (angular.element(this).scrollTop() >= baseTop) {
            element.addClass('fixed-on-top');
            element.width(angular.element('#' + attrs.fixedOnTop).width());
          } else {
            element.removeClass('fixed-on-top');
            element.width('100%');
          }
        });
      }
    }
  });
}());

fixed-on-top.css

.fixed-on-top {
  position: fixed;
  top: 98px;
}

fixed-on-top.html

<div>
  <table id="table-header" fixed-on-top="table-body">
    <!-- header cells -->
  </table>
  <table id="table-body">
    <!-- data cells -->
  </table>
</div>

jquery.js

$(function() {
  var baseTop = $('#table-header').get(0).offsetTop;
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > baseTop) {
      $('.header').addClass('fixed-on-top');
    } else {
      $('.header').removeClass('fixed-on-top');
    }
  });
});

こんにちは