Maison  >  Article  >  interface Web  >  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

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

WBOY
WBOYoriginal
2016-05-16 15:46:535195parcourir

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 :

...

...

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 :






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.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn