Skip to main content
se eliminaron 21 caracteres en el cuerpo
Origen Enlace
J. Castro
  • 2.5k
  • 8
  • 21
  • 32

Como puedo volver el siguiente codigocódigo responsive?

Estoy trabajando en un sitio webSitio Web y tengo el siguiente codigocódigo, pero para volver esta animación responsiveresponsive, debo cambiar muchas cosas en el cssCSS y htmlHTML, sera que hay alguna forma de hacerlo responsiveresponsive directamente en el archivo jsJS?

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

Como puedo volver el siguiente codigo responsive?

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>

Como puedo volver el siguiente código responsive?

Estoy trabajando en un Sitio Web y tengo el siguiente código, 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>

se añadieron 111 caracteres en el cuerpo
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
$(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>

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

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

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

se añadieron 120 caracteres en el cuerpo
Origen Enlace
fredyfx
  • 13.2k
  • 11
  • 33
  • 65

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

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

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

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

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>
Origen Enlace
Loading