3 façons de résoudre le problème selon lequel la couche flottante (en-tête, pied de page flottants) bloque le contenu sur le terminal mobile_html5 compétences du didacticiel

Dans les pages front-end d'aujourd'hui, notamment sur les appareils mobiles, il est souvent nécessaire de suspendre les modules ou et de les maintenir positionnés en haut ou en bas de la page après le glissement de la page. , comme suit Comme le montre la figure.

Le module "Reply Topic" suit le flottement de la page et est toujours suspendu en bas de la page. La structure du code est la suivante.

Copier le code Le code est le suivant : ... Répondre au sujet ... Pour réaliser une telle fonction, vous devez bien sûr utiliser position:fixed. Cependant, il y a un bug dans l'utilisation de position: corrigé. Prenez le flottant en bas comme exemple (il en va de même pour le flottant lorsque la page glisse vers le bas). flux de documents normal en raison d'un positionnement fixe, ce qui entraîne l'obscurcissement d'un certain contenu. Comme indiqué ci-dessous :

Le côté gauche ci-dessus est l'affichage problématique et le côté droit est l'affichage normal. Alors, comment résoudre ce problème ? Ici, je voudrais présenter trois de mes opinions, en espérant trouver une meilleure solution.

Méthode 1. Solution Javasript

Utilisez js pour résoudre le problème. Lorsque le curseur glisse vers le bas du contenu de la page, modifiez le positionnement fixe qui se détachera à l'origine du flux de documents par le positionnement relatif qui ne se détachera pas du flux de documents.

Utiliser des scripts pour résoudre des problèmes est la méthode la plus ardue. Essayez de ne pas utiliser de scripts s'ils peuvent être résolus avec du CSS, mais cela reste une méthode.

Copier le code Le code est le suivant : //Barre de défilement sur le Axe Y Distance de défilement fonction getScrollTop(){ return document.body.scrollTop; } //La hauteur totale du document fonction getScrollHeight(){

Return document.body.clientHeight; } //Hauteur de la fenêtre d'affichage du navigateur fonction getWindowHeight(){ var windowHeight = 0; if(document.compatMode == "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { 🎜 > Retour windowHeight; }

//Surveillance du glissement window.onscroll = function(){ //Lors du glissement vers le bas, le pied de page est placé vers le bas, en supposant que la hauteur de 🎜> if((getScrollHeight () - getScrollTop() - getWindowHeight()) > 61) $('.footer').css('position','fixed'); else $('.footer' ).css('position','relative'); }

Méthode 2. Ajouter un rembourrage en bas au corps Ajoutez un attribut padding-bottom à la balise html , de sorte que le contenu du flux de documents normal soit à une distance définie par padding-bottom du bas du corps.

L'inconvénient est que compte tenu de la réutilisation des modules et du besoin fréquent de fusionner des fichiers CSS après le lancement du projet, lorsque d'autres pages n'ont pas besoin de ce bloc flottant, cela alourdira les pages qui ne nécessitent pas de positionnement fixe , ce qui n'est pas recommandé. Utilisez cette méthode.

Copier le code Le code est le suivant : //Supposer la hauteur de est 60px corps { padding-bottom : 60px }

Méthode 3. Ajouter un espace réservé aux frères et sœurs Personnellement, je pense que cette méthode est la plus pratique. Enroulez une couche de div à l'extérieur du bloc , puis ajoutez un bloc au même niveau que . ;div> block Réglez-le à la même hauteur que et ne contient aucun contenu. Cela peut avoir l'effet d'un espace réservé, occupant le même espace de hauteur que , la page glissera vers le bas. À l'origine, le bloc de survol chevauchera parfaitement le bloc d'espace réservé. Cela n'affectera pas les autres pages. Le code est le suivant :

Le seul inconvénient est qu'il n'est pas sémantique et ajoute des balises vides sans contenu substantiel.

Copier le code Le code est le suivant : Répondre au sujet Voici les trois méthodes auxquelles j'ai pensé. J'ai peu de talent et de connaissances. S'il y a des erreurs ou de meilleures méthodes dans l'article, veuillez me le faire savoir.