0

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>

1 respuesta 1

0

lo que estas haciendo es ponerle el estilo en linea osea style="... yo te aconsejaria que hagas una hoja de estilo en la que le decis a la clase sticky que tenga un width de 2500px.

  .sticky {
      width: 2500px;
  }

o si no le agregas tramite js los 2500px de width :

  $('.sticky').css({ position: 'fixed', top: 0 , width: "2500px" });
  if (stickyTop < windowTop){
      $('.sticky').css({ position: 'fixed', top: 0 , width: "2500px" });
  }else {
      $('.sticky').css('position','static');
  }

EDIT mira en este enclance podes encontrar algo que te puede ser util para este problema

espero que sea de ayudo ! exitos

1
  • gracias por tu respuesta, si te das cuenta cuando bajas el scroll derecho un poco y despues mueves el de abajo hacia la derecha, no mantiene el año correctamente
    – sirdaiz
    el 8 ene. 2019 a las 13:18

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.