Javascript Girl
  1. Javascript Girl
  3. Comment déplacer 1 div plus rapide / sur un div lorsque la page est défilée
Intereting Posts
Comment rendre ShadowCamera visible dans trois.js r73? La manière la plus simple de faire apparaître un formulaire sans actualiser Quelle est la façon préférée de faire un survol CSS? Existe-t-il un Ember.js équivalent à Backbone.js Router pour l'historique et les changements de hash? Comment faire face à la limite des demandes parallèles par domaine du navigateur en cas de demande AJAX prioritaire? Mise à jour multi-voies Firebase "données non valides; N'a pas pu analyser l'objet JSON, le tableau ou la valeur " Cliquez sur le lien aléatoire via node.js et Webdriver Ajuster la taille de la police d'Android WebView Date javascript – préserver le décalage horaire Que fait cette déclaration? Console.log.bind (console) Arbre d3 – parents ayant les mêmes enfants Convertissez les clés d'un objet JSON en trajets de notation de points JavaScript méthodes privées Remplacer la partie html par javascript Objets JavaScript comme Hachis? La complexité est-elle supérieure à O (1)?

Comment déplacer 1 div plus rapide / sur un div lorsque la page est défilée

J'ai vu cet effet ici . La section de contenu principal de la page se déplace au-dessus d'un div lorsque la page est défilée.

J'ai essayé de recréer cet effet à l'aide de l'effet de parallaxe, mais en vain.Le problème est que, en utilisant la parallaxe, je peux changer la vitesse de 2 objets dans la même division uniquement. En plus de cela, je devrais mettre des étiquettes incessantes partout La page pour que le script fonctionne.

Existe-t-il un moyen plus simple (ou fonctionnel) d'atteindre cet effet? Merci beaucoup

Vous pouvez le faire avec CSS . 

#head, #subHead{ position: fixed; height: 80px; width: 100%; display: block; left: 0; top: 0; z-index: 10; /* on top of all */ } #subHead{ z-index: 4; /* below all */ top: 80px; /* height of the top div */ } #content{ position: relative; z-index: 6; /* below the top div, but above the one below it */ margin-top: 160px; /* the height of the two divs above combined */ }

Et pour faire subHead défiler plus lentement: 

 window.onscroll = function(ev){ var subHead = document.getElementById('subHead'), topHeight = document.getElementById('head').offsetHeight; subHead.style.top = (topHeight - document.body.scrollTop / 4) + 'px'; };

JQuery: 

 $(window).on('scroll', function(){ $('#subHead').css('top', ($('#head').height() - $('body').scrollTop() / 4)); });

Il semble qu'il y ait une certaine parallaxe au moins. Je n'ai pas parcouru le balisage assez bien, mais il est important de noter que la zone avec le graphique et la zone de contenu (ainsi que la zone pour les publicités) sont frères et sœurs <div> s.

Juste en tête de tête, avec une position CSS et un z-index , il serait un peu simple de rendre le contenu <div> au-dessus du graphique <div> . Il semble que seul le graphique <div> soit contrôlé via le défilement de parallaxe. Si ça a du sens.

Vous pouvez joindre l'événement onscroll pour votre premier div et définir la position de défilement du deuxième div dans votre JS. 

 <div id="div1" onscroll="OnScrollDiv()"> <div id="div2"></div> </div>

Javascript: 

 function OnScrollDiv () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div2.scrollTop = div1.scrollTop * 2; }

Plus d'informations ici: http://help.dottoro.com/ljurkcpe.php http://help.dottoro.com/ljnvjiow.php