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.

Étiquettes associées：

移动端

source：php.cn

Article précédent：Tutoriel graphique HTML5 sur la création d'un plug-in de lecteur audio sympa_html5 compétences du didacticiel Article suivant：La balise audio HTML5 utilise js pour le contrôle de la lecture example_html5 compétences du didacticiel

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

Derniers articles par auteur

• Qu'est-ce qu'une NullPointerException et comment y remédier ?
  2024-10-22 09:46:29
• De novice à codeur : votre voyage commence par les principes fondamentaux du C
  2024-10-13 13:53:41
• Débloquer le développement Web avec PHP : guide du débutant
  2024-10-12 12:15:51
• Démystifier C : un chemin clair et simple pour les nouveaux programmeurs
  2024-10-11 22:47:31
• Libérez votre potentiel de codage : programmation C pour les débutants absolus
  2024-10-11 19:36:51
• Libérez votre programmeur intérieur : C pour les débutants absolus
  2024-10-11 15:50:41
• Automatisez votre vie avec C : scripts et outils pour les débutants
  2024-10-11 15:07:41
• PHP Made Easy : vos premiers pas dans le développement Web
  2024-10-11 14:21:21
• Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité
  2024-10-11 12:59:11
• La clé du codage : libérer la puissance de Python pour les débutants
  2024-10-11 12:17:31

Derniers numéros

Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...

Depuis 2024-04-06 22:01:35

0

3

816

En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...

Depuis 2024-04-06 19:23:03

0

1

411

Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...

Depuis 2024-04-04 20:25:22

0

1

330

Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...

Depuis 2024-04-04 18:40:04

0

1

3528

Traduire « Supprimer le répertoire public » dans le projet Laravel en chinois par « Supprimer le répertoire public » Je fais un projet Laravel mais j'ai un gros problème, je n'arrive pas à supprimer le nom /...

Depuis 2024-04-03 19:26:05

0

1

355

Rubriques connexes

Plus>

• Quelles sont les méthodes de création d'un site Web mobile ?
• Introduction aux types de méthodes de soudage
• Il existe plusieurs fonctions de sortie et d'entrée en langage C
• Solution d'écran noir de démarrage Ubuntu
• Comment enregistrer des fichiers sur une clé USB
• La différence entre scratch et python
• Comment résoudre l'erreur 443
• Comment taper des guillemets doubles en latex