Je fais un site Web à l'aide de VUE.JS et de bootstrap, j'ai utilisé le composant JumboRon BOOTSTRAP en haut de ma page Web juste en dessous de ma navigation et j'aimerais savoir comment faire quelques des éléments défilables tout en gardant des éléments stationnaires. Je comprendrai un exemple comme je suis conscient que cela est toujours confus à ce stade.
3 Réponses :
Donc, d'après ce que je comprends, vous voulez faire de certains éléments défilés tandis que d'autres sont dans des positions fixes. Cela peut être fait en utilisant le positionnement et le débordement de CSS. Si vous avez un élément que vous souhaitez être peu connecté sauf s'il y a suffisamment de contenu dans cette Div pour le rendre défilable Utiliser les CSS suivants
P>
overflow: hidden;
ok corrigé n'est pas ce que je veux si j'utilise corrigé. Il fixera ces éléments à la page entière, je souhaite qu'ils restent dans le Jumbotron Je suis désolé, je pensais que c'était clair de mon exemple. Pouvez-vous expliquer comment j'utiliserais débordement: caché; avec ma démo
Vous devez utiliser html: Contexte de fond Propriété de CSS.
Pouvez-vous expliquer un peu plus comment j'utiliserais cette propriété donnée mon cas d'utilisation, je vais avoir plusieurs petites images que je veux faire défiler dans l'arrière-plan
Désolé si cela semble impoli, avez-vous vérifié l'extrait de code ou Codepen? Avez-vous essayé d'intégrer le style de cette réponse à votre code? Premièrement, vous devez déplacer votre image dans la propriété arrière-plan-img de CSS de la mise en œuvre actuelle de . Au moins, donnez-le d'essayer de poster la requête de ce que vous ne comprenez pas. Cette réponse est minimale et assez simple. Si vous ne l'obtenez toujours pas, créez des doutes spécifiques.
Oui, j'ai essayé cela avec ma page Web que j'étais confus au début parce que votre Codepen ne semble pas être ce que je cherche à la recherche de cette propriété semble corriger l'image et permettre au texte de faire défiler Je souhaite le contraire.
Pouvez-vous partager un exemple où vous avez vu un tel effet. Je suis désolé, je ne suis pas capable d'imaginer de quoi vous parlez. Avez-vous essayé de rechercher l'effet parallaxe ? Est-ce ce que vous voulez réaliser?
Ok ici est un exemple de ce que je parle à propos et si je comprends bien l'effet de parllaxe correctement, lorsque des éléments de l'écran ont des taux de défilement différents ce que je veux, c'est le texte dans le Jumbotron à résoudre et que les logos se déplacent derrière le texte lorsque l'utilisateur fait défiler le texte.
Si je reçois le problème, cela devrait faire l'astuce: https://codesandbox.io/embed/serene-rhodes-42224?fontSize=14&hidenavigation=1&theme=dark .
brièvement ce qui a été fait:
Merci de comprendre ce que je voulais. Permettez-moi de l'intégrer à mon site Web et j'accepterai votre réponse momentanément.
Juste une question rapide que j'ai joué avec les propriétés de hauteur et je ne peux pas obtenir le logo pour faire défiler le haut du Jumbotron qui est ce que je veux
Si vous parlez des événements suivants: Faites défiler vers le haut -> Logo to Top -> Conservez le défilement -> Faites défiler vers la fenêtre principale -> Faites défiler vers le bas -> Faites défiler vers le bas -> Conservez le défilement -> Logo ne pas descendre, alors c'est Lié au conteneur Jumbotron ne regarde pas la mise au point après la défilation de la fenêtre principale. Cela fonctionne si vous déplacez le curseur au moins des pixels et essayez de faire défiler à nouveau. Je ne sais pas si cela est attendu comportement avec le défilement imbriqué ou non. Si ce n'est pas ce que vous voulez dire, veuillez expliquer un peu plus.
La question est que le logo n'atteint jamais le sommet du Jumbotron, il s'arrête à peu près à mi-chemin, je comprends que le concept de l'accent a besoin d'être sur le Jumbotron afin de contrôler le défilement du logo Ce n'est pas le problème.
d'accord. Ensuite, vous devez définir une hauteur fixe pour le conteneur parent ( .wrapper ) et définir la propriété bas de l'élément mobile ( .alpha ) à la Différence entre la hauteur de l'emballage et la hauteur de l'élément (j'ai mis à jour la codesandbox). Aussi, prenez note que Jumbotron a un rembourrage supérieur et inférieur de 64px, de sorte que le logo ne fera pas défiler au-dessus de ce point.
Merci beaucoup!
Au moins pour moi, ce n'est pas très clair encore ce que vous voulez exactement accomplir. Peut-être que vous pouvez faire un dessin rapide par ex. Peinture de l'état de départ, l'état intermédiaire et l'état final et expliquer ce qui devrait se produire et ajouter ceux à la question.
@ Sumurai8 j'ai ajouté des photos laissez-moi savoir si cela vous aide à comprendre ce que j'essaie d'atteindre
Vous voulez donc que le texte reste dans une position fixe à l'écran, jusqu'à ce que le Jumbotron quitte l'écran, à quel point le texte fixe doit faire défiler l'écran avec le Jumbotron?