0

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>

3
  • 3
    Cambia los Px por % asi deberia funcionarte el 12 jul. 2018 a las 20:40
  • depende de como "responsee" el resto de elementos, tal vez tengas que poner un elemento invisible que se mueva con el resto y reemplazas el 900 y el 3000 por el top y el top+height de este "placeholder", algo como el inicio de la seccion y el fin de la seccion donde aparece la caja azul el 12 jul. 2018 a las 21:40
  • eso es solo una parte de la solcuión @CriticalGhost además interviene el acomodo de los elementos, el flujo de los mismos elementos a cada pantalla
    – user75901
    el 12 jul. 2018 a las 21:51

1 respuesta 1

1

Un truco es tener un elemento y calcular el top y el bottom respecto del documento y de la ventana, así si cambian las posiciones de los elementos antes y después siempre tenes los valores correctos.

En este ejemplo uso una section que cuando aparece en pantalla se muestra el cuadrado azul y cuando sale de pantalla se oculta. Para ajustar el momento cuando se activa la animación usar el thresold (comentado está el addClass y removeClass que es mi forma preferida de aplicar los show/hide).

El #box será visible mientras la sección #marcador sea visible. Para vuestra conveniencia hay un botón que achica el viewport.

$(document).ready(function() {
  //show hide button on scroll
  $('.box').hide();

  $(window).scroll(function() {

    $elementToTrack = $('#box');
    $elementPlaceholder = $('#marcador');
    $theWindow = $(window);
    thresold = 0;

    windowTop = $theWindow.scrollTop();
    windowBottom = windowTop + $theWindow.height();
    elementPlaceholderTop = $elementPlaceholder.offset().top;
    elementPlaceholderBottom = elementPlaceholderTop + $elementPlaceholder.height();
    placeholderFromBottom = elementPlaceholderTop <= windowBottom + thresold;
    placeholderFromTop = elementPlaceholderBottom >= windowTop - thresold;

    if (placeholderFromBottom && placeholderFromTop) {
      //      $elementToTrack.addClass('fShow')
      $elementToTrack.fadeIn();
    } else {
      //      $elementToTrack.removeClass('fShow')
      $elementToTrack.fadeOut();
    }

    /*
        if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) {
          $('.box').fadeIn();
        } else {
          $('.box').fadeOut();
        };
        //*/

  });
  $('#dale').on('click', function() {
    $('.container').toggleClass('adelgamate');
    $(window).scroll();
  });
});
.container {
  /*  height: 5000px;*/
  background-color: red;
}

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

section {
  border-bottom: 1px dotted white;
}

.adelgamate {
  width: 320px;
}

#dale {
  position: fixed;
  top: 30px;
  right: 30px;
}

#marcador {
  background: #fafafa;
}

div {
  font-family: verdana;
}
<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>
  <h1>Las secciones</h1>
  <section>
    <h2>una seccion</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sit amet ex in volutpat. Ut cursus ex id tincidunt euismod. Donec volutpat nulla a laoreet condimentum. Mauris sit amet lorem neque. Suspendisse eget diam finibus risus semper gravida.
      Donec dapibus ipsum ac turpis accumsan laoreet. Etiam varius nisl diam, vitae finibus quam lobortis id. Vestibulum sagittis placerat felis, vel placerat augue porta sed. Ut consectetur est eu est rhoncus, vel faucibus purus interdum.</p>
  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>
  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>
  </section>
  <section id="marcador">
    <h2>otra seccion</h2>
    <strong>Cuando pase por esta sección mostrame el cuadrado, ocultalo cuando termine de pasar. </strong>
    <p>
      Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam
      vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam tristique
      sit amet.</p>
    <strong>Cuando pase por esta sección mostrame el cuadrado, ocultalo cuando termine de pasar. </strong>
  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>

  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>
  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>
  </section>
  <section>
    <h2>otra seccion</h2>
    <p>Curabitur lorem odio, convallis vitae dapibus a, tempus vitae elit. Mauris sodales tempor tellus, eget eleifend felis tristique a. Suspendisse sed urna eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      Nullam vel tincidunt mauris, et tempus nunc. Vestibulum sed tempus sem. Donec nec ullamcorper felis. Maecenas ornare sit amet diam sit amet commodo. Duis finibus convallis dolor id luctus. Phasellus pellentesque est nunc, fermentum imperdiet quam
      tristique sit amet.</p>
  </section>
</div>
<button id="dale">respooonsiiiv</button>

1
  • muchísimas gracias #crack voy a probar el codigo :) el 18 jul. 2018 a las 19:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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