Javascript Girl
  1. Javascript Girl
  3. Modification d'un élément css position après défilement vers le bas de la page
Intereting Posts
Comment savoir si une chaîne contient un certain caractère en JavaScript? Le texte des champs précédents disparaît lors de l'ajout d'un nouveau avec select2 ajax Vérifiez si l'utilisateur utilise IE avec le mode de compatibilité Ajouter un sélecteur de date dans une zone de texte à l'aide de Greasemonkey Objet itératif Javascript Déclaration d'une fonction de membre dans JS Fonction JavaScript pour comptabiliser automatiquement des lettres consécutives dans une chaîne Les jets sont-ils primitifs? Des cordes? Objets? Besoin d'un lecteur Web javascript / HTML 5 qui joue de l'audio avec le codec G.711 enveloppé dans un conteneur WAV Eteration – explication et exemple Elément clone jquery modifié en variable Webpack – Erreur: ne peut pas définir la recherche '' query '' et les chargeuses multiples dans la liste des chargeurs Le graphe Facebook est le format JSONP api, que signifie / * * / en première ligne? Pourquoi la toile ne fonctionne pas avec le sélecteur jQuery? Exécutez le code à partir d'une boîte de texte et affichez la sortie dans une autre zone de texte en HTML

Modification d'un élément css position après défilement vers le bas de la page

Je suis en train de faire des gestes avec des jquery qui tentent de s'en occuper.

J'ai un ul nav qui a une position absolue, mais après avoir fait défiler la page vers le bas de 200 pixels, j'aimerais que la position soit réglée afin que le nav reste toujours sur la page.

Comment ferais-je cela?

Ci-dessous est l'exemple sur lequel je travaille

Http://satbulsara.com/tests/

Merci à tous d'avoir été si prompt à aider

C'est ce que je voulais 

 $(document).ready(function() { var theLoc = $('ul').position().top; $(window).scroll(function() { if(theLoc >= $(window).scrollTop()) { if($('ul').hasClass('fixed')) { $('ul').removeClass('fixed'); } } else { if(!$('ul').hasClass('fixed')) { $('ul').addClass('fixed'); } } }); });

Je l'ai compris

http://www.defringe.com/

http://satbulsara.com/tests/

Merci !!!!!

J'ai écrit ce plugin jQuery pour faire exactement cela.

Voici le code que j'utilise pour créer une barre latérale "collante". Vous devrez modifier les identifiants en fonction de votre balisage. 

 Var sidebarScrollTop = 0;

 $ (Document) .ready (function () {
     SidebarScrollTop = $ ("# sidebar"). Offset ();

     $ (Fenêtre) .scroll (function () { 
         Var docScrollTop = $ ('body, html'). ScrollTop ();

         Si (docScrollTop> sidebarScrollTop.top) {
             $ ("# Sidebar"). Css ({position: 'fixed', top: '0px'});
         } autre {
             $ ("# Sidebar"). Css ({position: 'static'});
         }
     });
 });

 $ (Window) .resize (function () {
     SidebarScrollTop = $ ("# sidebar"). Offset (). Top;
 });

 $ (Document) .resize (function () {
     SidebarScrollTop = $ ("# sidebar"). Offset (). Top;
 });

Fondamentalement, tout ce que vous devez faire est de changer la #sidebar pour l'ID du conteneur de la barre latérale. Ce code verra si l'élément de la barre latérale est défilé au-dessus du haut de l'écran. Si tel est le cas, il modifie sa position à fixed , et quand elle revient à la page à nouveau, la position est retournée à l'état static (par défaut).

Les fonctions $(document).resize() et $(window).resize() feront en sorte que la barre latérale reste en haut de la page lorsque le document / la fenêtre est redimensionnée respectivement. La fonction du document garantira que la barre latérale fonctionne correctement même si vous avez des animations jQuery modifiant la taille des éléments.