J'ai une ligne avec deux colonnes - une à gauche (avec un pot), et une autre à droite (avec des boutons).
https://codepen.io/oaktreepiro/full/neevxr p>
Lorsque l'écran est grand, je les ai côte à côte et pour voir Toutes les bons colonnes », je dois faire défiler vers le bas. Quand je le fais, je veux que le contenu de la colonne de gauche suive ce défilement, ce qui ne se produise pas actuellement. P>
J'ai déjà essayé un certain nombre de choses: p> J'ai essayé d'utiliser les requêtes multimédia - si l'écran J'ai essayé utiliser javascript - sur Je tente actuellement d'utiliser Voici mon code: p> https: // codepen. io / oaktreepedro / stylo / wlybqp p> html: p> css: p>
min-width code> était 992px code>, j'appliquerais un position: fixe ou un Position: Sticky Code> à la colonne de gauche; P> Li>
window.Resize () code>, si le innerwidth code> était > = 992 code>, i appliquerait la position : fixe code> ou Position: Sticky Code> dans le style de la colonne de gauche (code> ou classlist.add (position fixe) code> / classlist.add (position-collant) code> / classlist.add (sommet) code>; p> li>
Stickyfill code> avec la solution susmentionnée pour atteindre mon objectif, mais en vain. P> Li>
ul> var jar_section = document.getElementById("jar-section");
window.onResize = function() {
if (window.innerWidth >= 992) {
jar_section.classList.add("sticky-jar-section");
Stickyfill.add(jar_section);
} else {
jar_section.classList.remove("sticky-jar-section");
Stickyfill.remove(jar_section);
}
};
3 Réponses :
Il suffira d'ajouter: qui se comportera comme codépen: https://codepen.io/anon/pen/lmrjae élément relatif lorsque aucun défilement n'est présent, lorsque le défilement est présent, il se comportera comme Élément collant , Sauflecture uniquement lorsque les deux colonnes ont atteint la fin du document .
Je suis désolé, je n'ai probablement pas compris ce que vous avez dit (même après plusieurs lectures, ma faute, mais cela ne se comporte pas comme si je m'attendais à ce que je parte lorsque je fais défiler.
Peut-être que c'est de ma faute, quel est le résultat final que vous attendez?
Fondamentalement, lorsque je fais défiler vers le bas pour sélectionner un filtre à partir de la colonne de droite, je souhaite le pot sur la colonne à gauche pour suivre le défilement. Je n'aurais peut-être pas fait cela clair sur mon post original, alors je vais le modifier! Merci pour la patience!
Désolé, ce n'est toujours pas clair. Le modèle de boîte par défaut fonctionne comme prévu: comme je fais défiler, tous les éléments suivent le défilement, aucune astuce n'est nécessaire.
Mon erreur, votre code fonctionne effectivement! Mais cela ne bouge que le titre "mon emojar" et le pot lui-même - le comptoir juste sous le pot ne suit pas le mouvement du pot. J'ai essayé d'appliquer votre code dans la colonne entière avec la section ID = jar-Section , par opposition à ce que vous avez fait, qui a été appliqué uniquement au pot - dans ce cas, votre code ne fait pas Travail: / Comment faire fonctionner votre code pour la colonne entière, au lieu du pot? Merci beaucoup! Et désolé pour mon erreur!
Vous devez entendre les deux éléments dans le même récipient (c'est-à-dire:
), puis appliquez le CSS ci-dessus vers le conteneur.J'approuve cette réponse Tho, +1.
@ Mosèraguzzini, tu es absolument juste :)! J'ai mis tout ce que je voulais bouger à l'intérieur d'un seul
(cela ne pouvait tout simplement pas être le col avec id = "jar-section" elle-même, comme je l'ai rencontré si je le faisais), et je appliqué le CSS que vous avez fourni, atteignant ainsi mon objectif final. J'ai accepté votre réponse. Merci (et tout le monde, bien sûr!)! Je créerais un avec div placer dans la partie du code Création de l'élément et en utilisant collant sur ce div : Sticky comme suggéré:
La meilleure solution consiste à supprimer le code JavaScript et à utiliser uniquement CSS avec une requête médiatique. Extension de l'Islam Elslam elshobokshy's Réponse Je créerais un div dans la section Section JAR: CSS: # jar-section div et donner le < Code> Sticky Attribut à la DIV intérieure avec une requête multimédia.
En effet, c'est ce que j'ai fait suivi de la suggestion de @ Mosraguzzini! Merci!
Ce n'était pas moi, au cas où vous vous demandez. Toute aide est appréciée!
Vous devez appeler la référence, non exécuter la fonction pour
window.Resizeiser . En tout cas, il est préférable d'utiliserwindow.addeventlistener ('redimensionner', fonction);Hey @islamelshobokshy, j'ai fait une fonction appelée
windowresize () puis a ajouté l'écouteur d'événement pour le redimensionnement, faisant un rappel sur la fonctionWindowSreesize () . Néanmoins, je n'ai pas eu mon résultat attendu. Que suggérez-vous d'autre? Merci