粘滞的列水平滚动的窗口不是表

Question

我使用了来自codrops的Sticky Table标题： http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

并做了一些改动。上传的工作示例： http://codepen.io/dbn14/pen/yyQjjQ

$(function() {
  $('table').each(function() {
    if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {
      // Clone <thead>
      var $w = $(window),
        $t = $(this),
        $thead = $t.find('thead').clone(),
        $col = $t.find('thead, tbody').clone();

      // Add class, remove margins, reset width and wrap table
      $t
        .addClass('sticky-enabled')
        .css({
          margin: 0,
          width: '100%'
        }).wrap('<div class="sticky-wrap" />');

      if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');

      // Create new sticky table head (basic)
      $t.after('<table class="sticky-thead" />');

      // If <tbody> contains <th>, then we create sticky column and intersect (advanced)
      if ($t.find('tbody th').length > 0) {
        $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');
      }

      // Create shorthand for things
      var $stickyHead = $(this).siblings('.sticky-thead'),
        $stickyCol = $(this).siblings('.sticky-col'),
        $stickyInsct = $(this).siblings('.sticky-intersect'),
        $stickyWrap = $(this).parent('.sticky-wrap');

      $stickyHead.append($thead);

      $stickyCol
        .append($col)
        .find('thead th:gt(0)').remove()
        .end()
        .find('tbody td').remove();

      $stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');

      // Set widths
      var setWidths = function() {
          $t
            .find('thead th').each(function(i) {
              $stickyHead.find('th').eq(i).width($(this).width());
            })
            .end()
            .find('tr').each(function(i) {
              $stickyCol.find('tr').eq(i).height($(this).height());
            });

          // Set width of sticky table head
          $stickyHead.width($t.width());

          // Set width of sticky table col
          $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())
        },
        repositionStickyHead = function() {
          // Return value of calculated allowance
          var allowance = calcAllowance();

          // Check if wrapper parent is overflowing along the y-axis
          if ($t.height() > $stickyWrap.height()) {
            // If it is overflowing (advanced layout)
            // Position sticky header based on wrapper scrollTop()
            if ($stickyWrap.scrollTop() > 0) {
              // When top of wrapping parent is out of view
              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $stickyWrap.scrollTop()
              });
            } else {
              // When top of wrapping parent is in view
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          } else {
            // If it is not overflowing (basic layout)
            // Position sticky header based on viewport scrollTop
            if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {
              // When top of viewport is in the table itself
              $stickyHead.add($stickyInsct).css({
                opacity: 1,
                top: $w.scrollTop() - $t.offset().top
              });
            } else {
              // When top of viewport is above or below table
              $stickyHead.add($stickyInsct).css({
                opacity: 0,
                top: 0
              });
            }
          }
        },
        repositionStickyCol = function() {
          if ($stickyWrap.scrollLeft() > 0) {
            // When left of wrapping parent is out of view
            $stickyCol.add($stickyInsct).css({
              opacity: 1,
              left: $stickyWrap.scrollLeft()
            });
          } else {
            // When left of wrapping parent is in view
            $stickyCol
              .css({
                opacity: 0
              })
              .add($stickyInsct).css({
                left: 0
              });
          }
        },
        calcAllowance = function() {
          var a = 0;
          // Calculate allowance
          $t.find('tbody tr:lt(3)').each(function() {
            a += $(this).height();
          });

          // Set fail safe limit (last three row might be too tall)
          // Set arbitrary limit at 0.25 of viewport height, or you can use an arbitrary pixel value
          if (a > $w.height() * 0.25) {
            a = $w.height() * 0.25;
          }

          // Add the height of sticky header
          a += $stickyHead.height();
          return a;
        };

      setWidths();

      $t.parent('.sticky-wrap').scroll($.throttle(250, function() {
        repositionStickyHead();
        repositionStickyCol();
      }));

      $w
        .load(setWidths)
        .resize($.debounce(250, function() {
          setWidths();
          repositionStickyHead();
          repositionStickyCol();
        }))
        .scroll($.throttle(250, repositionStickyHead));
    }
  });
});

body {
  background-color: #FFF;
}
/* Component styles */

.component {
  line-height: 1.5em;
  padding: 0em;
  width: 100%;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}
.component .filler {
  font-family: "Blokk", Arial, sans-serif;
  color: #d3d3d3;
}
table {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
}
td,
th {
  padding: 0;
  text-align: left;
}
th {
  background-color: rgba(255, 255, 255, .5);
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}
tbody th {} tbody tr:nth-child(2n-1) {
  transition: all .125s ease-in-out;
}
tbody tr {}
/* For appearance */

.sticky-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  margin: 0;
  width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .125s ease-in-out;
  z-index: 50;
  width: auto;
  /* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
  box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
  z-index: 100;
  width: 100%;
  /* Force stretch */
}
.sticky-wrap .sticky-intersect {
  opacity: 1;
  z-index: 150;
}
.sticky-wrap .sticky-intersect th {} .sticky-wrap td,
.sticky-wrap th {
  box-sizing: border-box;
}
/* Not needed for sticky header/column functionality */

td.user-name {
  text-transform: capitalize;
}
.sticky-wrap.overflow-y {
  overflow-y: auto;
  max-height: 50vh;
}
.map {
  height: 175px;
  width: 175px;
  margin-bottom: 0px;
  margin-left: 5px;
  margin-top: 0px;
  margin-right: 8px;
}
.content {
  min-width: 175px;
  min-height: 175px;
  background-color: #099;
  margin-right: 8px;
  color: #FFF;
  padding: 0;
  margin-top: -5px;
}

<div class="container">
  <!-- Top Navigation -->
  <div class="component">

    <table>
      <thead>
        <tr>
          <th>
            <img src="../homepage/placeholder.jpg" width="142" height="43">
          </th>
          <th></th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>
            <img src="../homepage/map.jpg" class="map">
          </th>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
        </tr>
        <tr>
          <th>
            <img src="../homepage/map.jpg" class="map">
          </th>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
        </tr>
        <tr>
          <th>
            <img src="../homepage/map.jpg" class="map">
          </th>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
        </tr>
        <tr>
          <th>
            <img src="../homepage/map.jpg" class="map">
          </th>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
          <td>
            <div class="content">Content for class "content" Goes Here</div>
          </td>
        </tr>

      </tbody>
    </table>

  </div>
  <!-- /container -->
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

除了水平滚动之外，一切正常工作并不是我想要的。我不想滚动到表格的底部以水平滚动，而是希望能够使用实际的浏览器窗口水平滚动。有没有办法实现这个目标？