Ajouter une classe quand div est pixels x quantité de haut de fenêtre

voix
1

Je voudrais avoir est d'ajouter une classe à un div quand il est, par exemple, 100 pixels de haut de la fenêtre. Donc, pas après avoir fait défiler 100px mais quand il est 100px en dessous du haut de la fenêtre. Quelqu'un peut-il m'aider avec ça?

<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>
Créé 24/10/2019 à 11:53
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Je l'ai utilisé ce code à la barre de navigation fixe à haut sur l'événement de défilement. Vous pouvez ce code pour fixer le div

$(document).ready(function() {

      $(window).scroll(function () { 
          console.log($(window).scrollTop())
        if ($(window).scrollTop() > 280) {
          $('#nav_bar').addClass('navbar-fixed');
        }
        if ($(window).scrollTop() < 281) {
          $('#nav_bar').removeClass('navbar-fixed');
        }
      });
    });

css

.navbar-fixed {
        top: 0;
        z-index: 100;
      position: fixed;
        width: 100%;
    }
Créé 24/10/2019 à 12:11
source utilisateur

voix
0

Je ne sais pas si c'est exactement que vous voulez réaliser, mais voici le code. Si l'en-tête est plus 100px loin du haut (ce qui est peu habituelle, car il devrait y avoir quelque chose au-dessus de l'en-tête) de la fenêtre, la nouvelle classe est ajouté à l'en-tête.

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

MISE À JOUR: Selon vos commentaires, c'est la première solution qui est venu à mon esprit. Je pense que ce comportement dont vous avez besoin. Espoir qui fonctionne pour vous:

$(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');
    }
  });
});

Code Mise à jour: https://jsbin.com/foyoyus/6/edit?html,css,js,output

Créé 24/10/2019 à 13:43
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more