Ajouter/supprimer une classe avec jquery en fonction du défilement vertical ?

Question

J'aimerais donc supprimer la classe de l'en-tête une fois que l'utilisateur a fait défiler la page un peu plus bas et ajouter une autre classe pour changer l'apparence de l'en-tête.

J'essaie de trouver la façon la plus simple de procéder, mais je n'y parviens pas.

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}    

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

Je suis sûr que je fais quelque chose de très élémentaire qui n'est pas correct.

Answer 1

Pour les mobiles Android, $(window).scroll(function() et $(document).scroll(function() peuvent fonctionner ou non. Utilisez donc plutôt ce qui suit.

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

Ce code a fonctionné pour moi. J'espère qu'il vous aidera.

Answer 2

Dans un cas similaire, je voulais éviter de toujours appeler addClass ou removeClass pour des raisons de performances. J'ai divisé la fonction de gestion du défilement en deux fonctions individuelles, utilisées en fonction de l'état actuel. J'ai également ajouté une fonctionnalité de blocage (debounce) conformément à cet article : https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers

        var $header = jQuery( ".clearHeader" );         
        var appScroll = appScrollForward;
        var appScrollPosition = 0;
        var scheduledAnimationFrame = false;

        function appScrollReverse() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition > 500 )
                return;
            $header.removeClass( "darkHeader" );
            appScroll = appScrollForward;
        }

        function appScrollForward() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition < 500 )
                return;
            $header.addClass( "darkHeader" );
            appScroll = appScrollReverse;
        }

        function appScrollHandler() {
            appScrollPosition = window.pageYOffset;
            if ( scheduledAnimationFrame )
                return;
            scheduledAnimationFrame = true;
            requestAnimationFrame( appScroll );
        }

        jQuery( window ).scroll( appScrollHandler );

Peut-être que cela sera utile à quelqu'un.

Answer 3

Ceci est basé sur la réponse de @shahzad-yousuf, mais j'avais seulement besoin de compresser un menu lorsque l'utilisateur fait défiler la page vers le bas. J'ai utilisé le point de référence du conteneur supérieur roulant "hors écran" pour initier le "squish"

  <script type="text/javascript">
    $(document).ready(function (e) {
      //position of element
      var scroll_position = $('div.mainContainer').offset().top;
      var scroll_activation_point = scroll_position;
      $(window).on('scroll', function (e) {
        var y_scroll_pos = window.pageYOffset;
        var element_in_view = scroll_activation_point < y_scroll_pos;
        if (element_in_view) {
          $('body').addClass("toolbar-compressed ");
          $('div.toolbar').addClass("toolbar-compressed ");
        } else {
          $('body').removeClass("toolbar-compressed ");
          $('div.toolbar').removeClass("toolbar-compressed ");
        }
      });

    });   </script>