Me gustaría tener es agregar una clase a un div cuando está, por ejemplo, 100 píxeles de la parte superior de la ventana gráfica. Entonces, no después de desplazarse 100px, sino cuando está 100px debajo de la parte superior de la ventana gráfica. ¿Puede alguien ayudarme con esto?

<script>
jQuery(function() {
    //caches a jQuery object containing the header element
    var header = jQuery('#v0');
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 2939) {
            header.addClass('fixed1');
 }

    else {
            header.removeClass('fixed1');
        }
    });
});
</script>
2
Werner - publivision 24 oct. 2019 a las 12:53

1 respuesta

La mejor respuesta

No estoy seguro de si esto es exactamente lo que desea lograr, pero aquí está el código. Si el encabezado está a más de 100 px de la parte superior (lo cual no es muy habitual porque entonces debería haber algo en la parte superior del encabezado) de la ventana, entonces la nueva clase se agrega al encabezado.

$(function() {  
  var $header = $('#v0');
  $(window).scroll(function () { 
    if ($header.offset().top - $(this).scrollTop() > 100) {
      $header.addClass('blabla');
    } else {
      $header.removeClass('blabla');
    }
  });
});

ACTUALIZACIÓN: Dependiendo de sus comentarios, esta es la primera solución que se me ocurrió. Creo que ese es el comportamiento que necesitas. Espero que eso te funcione:

$(function() {  
  var $header = $('header');
  var $video = $('#v0');
  var $videoContainer = $('.videoContainer');

  $(window).scroll(function () {
    // Here we check if video field touches the header, and add 'fixed' class
    if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
      $video.addClass('fixed')
    }
    // Since both video and header is fixed now I needed some other
    // element to check if we are again getting away from the header
    // (scrolling up again) That's why I added the $videoContainer element 
    // to be able to remove the 'fixed' class.
    if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
      $video.removeClass('fixed');
    }
  });
});

Código actualizado: https://jsbin.com/foyoyus/6/edit?html, css, js, salida

1
Orkun Tuzel 24 oct. 2019 a las 13:36