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.

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Repo: Comment relancer ses coéquipiers

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

4 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7364

15

Tutoriel Java

1628

14

Tutoriel CakePHP

1353

52

Tutoriel Laravel

1266

25

Tutoriel PHP

1214

29

Afficher plus