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

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

Violon

En outre, en supprimant le clearHeader vous supprimez la classe position:fixed; de l'élément ainsi que la possibilité de le re-sélectionner par l'intermédiaire de la fonction $(".clearHeader") sélecteur. Je suggère de ne pas supprimer cette classe et d'ajouter une nouvelle classe CSS par-dessus à des fins de stylisme.

Et si vous souhaitez "réinitialiser" l'ajout de classe lorsque l'utilisateur remonte dans l'écran :

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

Violon

éditer : Voici une version qui met en cache le sélecteur d'en-tête - les performances sont meilleures car il n'interroge pas le DOM à chaque fois que vous faites défiler l'écran et vous pouvez en toute sécurité supprimer/ajouter une classe à l'élément d'en-tête sans perdre la référence :

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Violon

Answer 2

Javascript pur

Voici un exemple en javascript de gestion des classes pendant le défilement.

const navbar = document.getElementById('navbar')

// OnScroll event handler
const onScroll = () => {

  // Get scroll value
  const scroll = document.documentElement.scrollTop

  // If scroll value is more than 0 - add class
  if (scroll > 0) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled")
  }
}

// Use the function
window.addEventListener('scroll', onScroll)

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background-color: #89d0f7;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
  transition: box-shadow 500ms;
}

#navbar.scrolled {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

#content {
  height: 3000px;
  margin-top: 60px;
}

<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>

Quelques améliorations

Vous voudrez probablement limiter la gestion des événements de défilement, d'autant plus que la logique du gestionnaire devient plus complexe. throttle de lodash lib s'avère utile.

Et si vous faites du spa, gardez à l'esprit que vous devez supprimer les écouteurs d'événements avec la fonction removeEventListener une fois qu'ils ne sont plus nécessaires (par exemple, lors de la onDestroy le crochet de cycle de vie de votre composant, comme destroyed() pour Vue, ou peut-être la fonction de retour de useEffect pour React).

Exemple d'étranglement avec lodash :

    // Throttling onScroll handler at 100ms with lodash
    const throttledOnScroll = _.throttle(onScroll, 100, {})

    // Use
    window.addEventListener('scroll', throttledOnScroll)

Answer 3

Ajoutez-y des effets de transition si vous le souhaitez :

http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader {
  height:50px;
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;

  -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.clearHeader.darkHeader {
 background:#000;
}

Answer 4

Voici mon code

jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

Il fonctionne bien

Answer 5

Cette valeur est-elle voulue ? if (scroll <= 500) { ... Cela signifie qu'il se produit de 0 à 500, et non de 500 à plus. Dans le message original, vous avez dit "après que l'utilisateur ait fait défiler la page un peu plus bas"