jQuery Girl
  1. jQuery Girl
  3. Faire suivre la division latérale après un certain défilement
Intereting Posts
JQuery UI Loaded Event? Ajax.ActionLink vs appel Html.ActionLink + Jquery.Ajax Masquer une div particulière, puis afficher div après clic Comparaison de jQuery val () Comment déclencher un événement lors d’un appel de fonction arbitraire à l’aide de jQuery Comment obtenir les propriétés de style créées par un élément? Syntaxe jQuery: où mettre «toFixed» Que signifie fn dans jQuery? Positionnement DOM datatable jQuery pour les boutons Ouverture et fermeture en fondu d’un modal Bootstrap 3 jQuery Extraire l’année à partir de la date et append la classe au parent Placer les résultats d’un formulaire dans un modal dans Bootstrap 3 Changer la couleur de l’image sur la canvas Comment cliquer sur des objects qui disparaissent Flash au-dessus de la boîte de dialog jQuery

Faire suivre la division latérale après un certain défilement

En ce moment, le div à droite suit le défilement tout le temps. Si je veux qu’il commence à suivre le défilement lorsque la page est défilée en haut du div et qu’il rest là lorsqu’il est défilé, que dois-je faire de plus?

jsfiddle 

$(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('.mSidebar').css( "top", scrollTop + 400 ); console.log(scrollTop); });

Utilisez comme ceci: 

 $(document).ready(function(){ $(window).scroll(function(){ if($(document).scrollTop() > 400) { var newPos = $(document).scrollTop() + 400 ; $('.mSidebar').css( {top:newPos}); } else { $('.mSidebar').css( {top:400}); } }) })

Use position: fixed lorsque vous voulez que quelque chose rest en haut (ou en bas). 

  //you can do it in initial layout, no need to set up css in js $('.mSidebar').css( "position", 'fixed'); //if user scrolled down more then 400 px we make div to stick to the top if (scrollTop>400) { $('.mSidebar').css( "top", 0); } else { //otherwise it stays in the middle of the screen $('.mSidebar').css( "top", '400px'); }

https://jsfiddle.net/4zreh4ek/6/

Vous utilisez position: fixé lorsque le parchemin arrive à la position de votre choix. Ceci est déclenché par l’événement scroll.

MAIS! assurez-vous que le div est réinitialisé quand il revient à <400 défiler. Voici un exemple que j'ai établi.

J’espère que cela t’aides! 

 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 400) { $('.mSidebar').css("position", "fixed"); $('.mSidebar').css("top", 5); } else { $('.mSidebar').css("position", "absolute"); $('.mSidebar').css("top", 400); } }); 
 .mSidebar { height: 300px; width: 200px; background-color: black; position: absolute; top: 400px; right: 20px; } body { width: 1000px; height: 10000px; }