jQuery Girl
  1. jQuery Girl
  3. Change div css lorsque l’utilisateur le fait défiler à l’aide de jQuery
Intereting Posts
jQuery Accordion: les liens ne fonctionnent pas Comment désactiver tous les éléments d’un div ou d’une table à l’aide de jQuery Binding Image src en tant qu’expression dans Knockout Tablesorter et multi textExtraction dans jQuery? Améliorez les performances des gros volumes pour de grandes quantités de données Données distantes Typeahead.js + Bloodhound: comment obtenir une référence à un object appelant? Comment appeler la fonction d’échappement du navigateur Imprimer un object JSON avec jQuery Style du texte en surbrillance dans la recherche incrémentielle JS Accéder au dernier élément inspecté de Chrome, à savoir $ 0 et $ 1 via JS jQuery xml parse avec check pour IE8 ne fonctionne pas Ligne de table jQuery Clone jqgrid charge un dataset volumineux sans pagination comment append une clé à un object d’un tableau en javascript ou jquery jQuery plante Internet Explorer

Change div css lorsque l’utilisateur le fait défiler à l’aide de jQuery

Lorsqu’un utilisateur fait défiler une div, j’ai besoin que les modifications soient apscopes à la position: fixe. Un peu comme ce qui est fait ici: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/ mais avec un simple jquery, sans le plugin.
Le div doit également arrêter de faire défiler une fois que l’utilisateur fait défiler jusqu’à un autre div.
Par exemple: 

 
//must start scrolling with user when user reaches it. // when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap

Je suppose que j’utiliserais .scroll() et .css() , mais je ne sais pas du tout où aller.

J’ai remarqué dans votre réponse #this disparaît brusquement une fois que vous êtes #footer au #footer . J’ai peaufiné votre réponse pour permettre à #this de coller à #footer et de faire défiler ce qui est beaucoup plus fluide.

Ma démo utilise un balisage légèrement différent et est un peu plus verbeuse, alors sautez vers jsFiddle et vérifiez-le.

Démo: jsfiddle.net/Marcel/e9hyw/

C’est ce qui a finalement fonctionné pour moi: 

  jQuery(document).ready(function() { var topOfrel = jQuery("#this").offset().top; var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); var topOffootero = topOffooter ; var boxheight = jQuery(window).height() - 130;//adjusting for position below jQuery(window).scroll(function() { var topOfWindow = jQuery(window).scrollTop(); if (topOfrel < topOfWindow && topOffooter > topOfWindow) { jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px"); } else { jQuery("#this").css("position", "static"); } }); });

la page que vous référencez utilise jQuery:

et a également d'autres Javascript inclus sur ce que nous ne voyons pas

accessoirement vous pouvez le voir ici: 

 http://imakewebthings.com/jquery-waypoints/waypoints.js http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js

les fonctions qu'il utilise peuvent être vues ici, mais je ne dirais pas que c'est une réponse rapide. Sur la base de ses scripts, il attache un écouteur à l'élément après le chargement de la page:

Si vous avez des questions spécifiques, n'hésitez pas, mais je doute que beaucoup de personnes vous expliqueront le scénario dans son intégralité.