Necesito que los años [2011,2012,2013,2014,2015,2016] se mantegan fijo en la ventana, el procedimiento es el siguiente:
Cuando bajo el scroll lateral derecho los años se reajustan y no corresponde con las datos pero cuando subo el scroll derecho del todo si aparece bien, necesito que el scroll de años se quede fijo cuando bajeel scroll derecho y cuando mueva el scroll inferior a la derecha que se siga manteniendo correctamente.
He probado lo sgte:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script type="text/javascript">
$(function(){ // document ready
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
$('.sticky').css({ position: 'fixed', top: 0 });
if (stickyTop < windowTop){
$('.sticky').css({ position: 'fixed', top: 0 });
}else {
$('.sticky').css('position','static');
}
});
}
});
</script>
</head>
<body>
<div style="overflow-x: auto;width:2500px">
<table class="sticky">
<td style="background-color:#f4f7f9" ng-repeat="num in [2011,2012,2013,2014,2015,2016]" width="500px">{{num}}</td>
</table>
<table ng-repeat="var in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]">
<td style="background-color:#f4f7f9" ng-repeat="num in [1002011,1002012,1002013,1002014,1002015,1002016]" width="500px">{{num}}<br>{{num}}</td>
</table>
</div>
</body>
</html>