Estoy trabajando en un sitio web y tengo el siguiente codigo, pero para volver esta animación responsive, debo cambiar muchas cosas en el css y html, sera que hay alguna forma de hacerlo responsive directamente en el archivo js?

    $(document).ready(function() {
      //show hide button on scroll
      $('.box').hide();
      $(window).scroll(function() {
        if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) {
          $('.box').fadeIn();
        } else {
          $('.box').fadeOut();
        };
      });
    });
    
    ---------------------------------------------------------------------------
    .container {
      height: 5000px;
      background-color: red;
    }
    
    .box {
      height: 100px;
      width: 200px;
      background-color: blue;
      position: fixed;
    }
    --------------------------------------------------------------------------
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class='container'>
      <div class='box' id='box'></div>
    
    </div>