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?

   

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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();
            };
          });
        });

<!-- language: lang-css -->

     .container {
          height: 5000px;
          background-color: red;
        }
        
        .box {
          height: 100px;
          width: 200px;
          background-color: blue;
          position: fixed;
        }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->