Javascript Girl
  1. Javascript Girl
  3. Comment cacher le contenu défilé sous une div transparente?
Intereting Posts
Comment afficher des bulles d3 dans différentes couleurs pour un jeu de données avec une branche et beaucoup d'enfants? Regex alphanumérique javascript Comment faire pivoter un objet 3D sur l'axe three.js? Pourquoi toString () et this.toString () produisent-ils des résultats différents dans la console de Chrome? Code de géocodage inverse Comment vérifier si un script chargé de manière asynchrone a terminé le chargement sous javascript Meteor publier ses abonnements n'est pas réactif Comment puis-je écrire une fonction de flèche dans ES6 de manière récursive? Invocation d'une fonction JavaScript à partir d'un gestionnaire incomplet de p: remoteCommand – en simulant la même chose en utilisant un code JavaScript Comment faire un défilement infini avec javascript uniquement sans jquery Bouton de retour du Safari mobile Ancre à l'élément dans la division cachée Formulaire de redirection vers différentes URL en fonction de l'élément d'option sélectionné Barre de progression le long des bordures d'un rectangle La réponse pour le contrôle en amont a un code d'état HTTP invalide 405

Comment cacher le contenu défilé sous une div transparente?

Vous avez deux divs, l'un sur l'autre, et celui sur le dessus est transparent. Cependant, lorsque vous faites défiler, vous voulez que le div sur le fond soit caché car il se passe sous la première division transparente .

Vous ne voulez pas l' display: de la seconde div display: changer à none; Dès qu'il est sous la première division. Vous voulez simplement que la partie qui se cache soit cachée.

J'ai beaucoup googlé pour une réponse:

1) Masquer le contenu défilement sous l'en-tête transparent

2) Contenu défilable derrière les divisions transparentes de position fixe lors du défilement de la page

3) Corps de défilement sous une tête d'en-tête transparente

4) L'en-tête statique transparent voudrait ne pas finir avec le texte affiché sous l'en-tête lors du défilement

5) Masquer le contenu défilant sous l'arrière-plan Transparent fixe de l'en-tête

La réponse # 1-4 rend le div sur le background: inherit supérieur background: inherit ou background-image: url('background_image.jpg)' . Le problème avec cela est que mon arrière-plan est une photographie, c'est-à-dire lorsque vous faites défiler vers le bas ce que vous voyez est différent, par opposition à une couleur ou un motif. Le «fond» de la div transparente doit changer à mesure que les antécédents réels changent.

# 5 offre une solution à cela en utilisant JQuery, mais il y a des problèmes horribles et horribles avec le décalage de défilement dans les navigateurs et non Firefox.

Les gens, comment puis-je le faire?

Cela ne peut pas être fait sans JavaScript. Pour que le contenu ne s'affiche pas à travers une couche transparente, il ne doit pas être rendu du tout – vous devriez utiliser le overflow:hidden . Le problème est que le bord du contenu ne peut pas être corrigé si le contenu se déplace avec la page. Un élément peut être positionné par rapport à la fenêtre ou par rapport à la page, mais pas les deux en même temps.