web-dev-qa-db-fra.com

Ajouter/supprimer une classe avec jQuery basé sur le défilement vertical?

Donc, fondamentalement, j'aimerais supprimer la classe de 'l'en-tête' après que l'utilisateur a fait un peu défilement et ajouter une autre classe pour changer son apparence.

Essayer de trouver le moyen le plus simple de faire cela mais je ne peux pas le faire fonctionner.

$(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 faux.

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

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

Fiddle

De même, en supprimant la classe clearHeader, vous supprimez le position:fixed; de l'élément, ainsi que la possibilité de le re-sélectionner à l'aide du sélecteur $(".clearHeader"). Je suggérerais de ne pas supprimer cette classe et d'ajouter une nouvelle classe CSS par dessus pour des raisons de style.

Et si vous voulez "réinitialiser" l’ajout de classe lorsque les utilisateurs font défiler:

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

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

Fiddle

edit: Voici la version qui met en cache le sélecteur d'en-tête - de meilleures performances car il n'interrogera pas le DOM à chaque défilement et vous pouvez supprimer/ajouter en toute sécurité 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');
        }
    });
});

Fiddle

147
Fabrício Matté

Ajoutez un effet de transition si vous aimez:

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;
}
3
Marc

C'est 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");
        }

    });

});

Ça marche bien

2
Shahzad Yousuf

Dans un cas similaire, je voulais éviter de toujours appeler addClass ou removeClass en raison de problèmes de performances. J'ai divisé la fonction de gestionnaire de défilement en deux fonctions distinctes, utilisées en fonction de l'état actuel. J'ai également ajouté une fonctionnalité anti-rebond selon 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 quelqu'un trouve cela utile.

1
chrisbergr

Cette valeur est-elle destinée? if (scroll <= 500) { ... Cela signifie que cela se passe de 0 à 500, et non 500 et plus. Dans le message original, vous avez dit "après que l'utilisateur a légèrement défilé"

1
ido

Pour Android mobile, $ (fenêtre) .scroll (function () et $ (document) .scroll (function () peuvent ou ne peuvent pas fonctionner. Utilisez plutôt le code suivant.

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 que cela vous aidera. 

0
user9261696