Maison >interface Web >Tutoriel H5 >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
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.
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
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.
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
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 dePersonnellement, je pense que cette méthode est la plus pratique. Enroulez une couche de div à l'extérieur du bloc