Ajouter une classe à un élément lorsque l'utilisateur fait défiler à 50px au-dessus d'elle?

Personne ne sait comment je peux atteindre les objectifs suivants avec jQuery:

Je veux ajouter une classe (.fixe) à un élément (#contenu) lorsqu'un utilisateur atteint 50px au-dessus de #contenu. Et puis, lorsque l'utilisateur fait défiler jusqu'50px au-dessus de #contenu, je veux la sortir de la classe.

Comment puis-je le faire avec aussi peu de script que possible?

<div id="header">
</div>

<div id="content">
</div>

<div id="content-2">
</div>

VIOLON

  • pouvez-vous préciser? vous souhaitez ajouter une classe lorsqu'ils sont 50px contenu ci-dessus, puis retirez la classe lorsqu'ils sont...50 px contenu ci-dessus? Je n'ai pas assez undertand
InformationsquelleAutor caustic | 2015-03-05
  1. 5

    Si je comprends bien, cela devrait faire l'affaire.

    $(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() >= $('#content').offset().top - 50) {
            $("#content").css("background","red");
        } else {
            $("#content").css("background","orange");
        }
    });
});

    Fondamentalement, il vérifie la position actuelle de l'utilisateur de faire défiler et de la comparer à la position de la div moins de 50 pixels.

    Si vous juste au-delà de ce code dans votre document, il devrait fonctionner correctement.

    InformationsquelleAutor g_marchildon
  2. 1

    Essayer cela,

    $(window).scroll(function() {

    if ($(this).scrollTop() > 50){  
        $('#content').addClass("content_fixed");
    }
    else{
        $('#content').removeClass("content_fixed");
    }
});

    Démo : http://jsfiddle.net/UI_Designer/8j0a1Lkk/1/

    InformationsquelleAutor Logz
  3. 0

    Vous pouvez utiliser le plugin jquery waypoint (http://imakewebthings.com/waypoints/) pour détecter lorsque l'utilisateur a fait défiler jusqu'à la zone et ensuite utiliser le javascript .innerhtml fonction pour modifier le code html. Le seul problème avec cette méthode est que vous devez avoir un autre élément qui entoure votre élément principal SEULEMENT.

    InformationsquelleAutor Leuven Wang