Maison interface Web js tutoriel Comment positionner la couche fixe dans les compétences js_javascript

Comment positionner la couche fixe dans les compétences js_javascript

May 16, 2016 pm 04:44 PM
固定层 定位

Vous devez obtenir les coordonnées de certains objets HTML pour définir les coordonnées du calque cible de manière plus flexible. Ici, vous pouvez utiliser des attributs tels que document.body.scrollTop, mais ces attributs se trouvent dans les pages Web xhtml standard, ou plus simplement, avec <. ;! La valeur obtenue de la balise DOCTYPE...> est 0 ; si cette balise n'est pas utilisée, tout ira bien Alors comment obtenir les coordonnées du corps en xhtml ? Bien sûr, il existe un moyen. Nous utilisons document.documentElement pour remplacer document.body. Par exemple, nous pouvons écrire comme ceci :

Copier le code. Le code est le suivant :

var top=document.documentElement.scrollTop ||document.body.scrollTop

|| chose, non seulement peut être utilisé dans les instructions conditionnelles if, mais peut également être utilisé pour l'affectation de variables. L'exemple ci-dessus peut être écrit dans le format suivant :
Copier le code<.> Le code est le suivant :
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop

Écrire comme ceci peut avoir une bonne compatibilité. Une autre chose à noter est que si la valeur de document.documentElement.scrollTop n'est pas déclarée, 0 sera affiché à la place.


Comment positionner la couche fixe dans les compétences js_javascript
Explication : Pour obtenir la position des coordonnées verticales des coordonnées de la barre de défilement sur la page actuelle : utilisez
document.documentElement.scrollTop au lieu de
document.body .scrollTop ;
document.documentElement obtient la balise html,
document.body obtient la balise body
Sous le standard w3c, document.body.scrollTop vaut toujours 0, vous devez utiliser document.documentElement.scrollTop ; . Au lieu de cela :
Si nous voulons positionner la position absolue de la souris par rapport à la page, la plupart des moteurs de recherche que nous obtiendrons vous demanderont d'utiliser
event.clientX document.body.scrollLeft, event.clientY. document.body. scrollTop;
Si vous trouvez que la souris s'écarte de votre imagination, ce n'est pas du tout surprenant, car IE5.5 ne prend plus en charge l'objet document.body.scrollX
Nous devons donc ajouter un phrase;

Copier le code Le code est le suivant :
if (document.body && document .body.scrollTop &&document.body.scrollLeft)
{
top=document.body.scrollTop
left=document.body.scrollleft
}
if (document.documentElement && document; .documentElement.scrollTop&& document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft
}

Le Ce qui suit décrit l'utilisation de certains paramètres :
Visibilité des pages Web Largeur de la zone : document.body.clientWidth;
Hauteur de la zone visible de la page Web : document.body.clientHeight
Largeur de la zone visible du Web ; page : document.body.offsetWidth ; (y compris la largeur du bord) ;
Hauteur de la zone Web visible : document.body.offsetHeight ; (y compris la largeur du bord) ;
Largeur du texte intégral du Web ; corps de la page : document.body.scrollWidth ;
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight ;
La page Web défile Haut : document.body.scrollTop
Gauche du Web ; page en cours de défilement : document.body.scrollLeft;
Haut du corps de la page Web : windows.screenTop
Gauche du corps de la page Web : windows.screenLeft ; .screen.height;
Largeur de résolution d'écran : windows.screen.widht;
Hauteur de l'espace de travail disponible : windows.screen.availHeight
Largeur de la zone de travail disponible : windows.screen.availWidth ; Obtenez la hauteur de défilement de l'objet : scrollHeight;
Définissez ou obtenez la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre : scrollLeft; haut de l'objet et haut du contenu visible dans la fenêtre : scrollTop;
Récupère la largeur de défilement de l'objet : scrollWidth;
Récupère l'objet par rapport à la mise en page ou spécifié par les coordonnées parent : attribut offsetParent. hauteur de la coordonnée parent : offsetHeight;
Obtenez la position gauche calculée de l'objet par rapport à la mise en page ou la coordonnée parent spécifiée par la propriété offsetParent : offsetLeft;
Obtenez la position supérieure calculée de l'objet par rapport à la mise en page. ou la coordonnée parent spécifiée par la propriété offsetTop Position : offsetTop;
event.clientX : coordonnée horizontale par rapport au document
event.clientY : coordonnée verticale par rapport au document ; par rapport au conteneur ;
event .offsetY : La coordonnée verticale par rapport au conteneur ;
document.documentElement.scrollTop : Définit la hauteur verticale du défilement
event.clientX document.documentElement.scrollTop : La verticale quantité de défilement par rapport à la position horizontale du document ;
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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Comment localiser les écouteurs sans fil Apple s'ils sont perdus_Comment localiser les écouteurs sans fil Apple Comment localiser les écouteurs sans fil Apple s'ils sont perdus_Comment localiser les écouteurs sans fil Apple Mar 23, 2024 am 08:21 AM

1. Tout d'abord, nous ouvrons l'application [Recherche] sur le téléphone mobile et sélectionnons l'appareil dans la liste sur l'interface de l'appareil. 2. Ensuite, vous pouvez vérifier l'emplacement et cliquer sur l'itinéraire pour y naviguer.

Comment utiliser les fonctions de carte et de localisation dans Uniapp Comment utiliser les fonctions de carte et de localisation dans Uniapp Oct 16, 2023 am 08:01 AM

Comment utiliser les fonctions de carte et de positionnement dans uniapp 1. Introduction générale Avec la popularité des applications mobiles et le développement rapide de la technologie de positionnement, les fonctions de carte et de positionnement sont devenues un élément indispensable des applications mobiles modernes. uniapp est un framework de développement d'applications multiplateforme développé sur la base de Vue.js, qui peut permettre aux développeurs de partager du code sur plusieurs plateformes. Cet article expliquera comment utiliser les cartes et les fonctions de positionnement dans uniapp et fournira des exemples de code spécifiques. 2. Utilisez le composant uniapp-amap pour implémenter la fonction map

Comment utiliser un plugin WordPress pour implémenter la fonctionnalité de localisation instantanée Comment utiliser un plugin WordPress pour implémenter la fonctionnalité de localisation instantanée Sep 05, 2023 pm 04:51 PM

Comment utiliser les plugins WordPress pour implémenter la fonction de localisation instantanée Avec la popularité des appareils mobiles, de plus en plus de sites Web commencent à fournir des services basés sur la géolocalisation. Dans les sites WordPress, nous pouvons utiliser des plug-ins pour mettre en œuvre des fonctions de positionnement instantané et fournir aux visiteurs des services liés à leur situation géographique. 1. Choisissez le bon plug-in Il existe de nombreux plug-ins proposant des services de géolocalisation dans la bibliothèque de plug-ins WordPress. En fonction des besoins et des exigences, choisir le bon plug-in est la clé pour obtenir une fonctionnalité de positionnement instantané. En voici quelques-uns

Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go Jul 01, 2023 pm 12:33 PM

Méthodes pour résoudre le problème de l'emplacement des fuites de mémoire dans le développement du langage Go : Les fuites de mémoire sont l'un des problèmes courants dans le développement de programmes. Dans le développement du langage Go, en raison de l'existence de son mécanisme automatique de récupération de place, les problèmes de fuite de mémoire peuvent être moindres que dans d'autres langages. Cependant, lorsque nous sommes confrontés à des applications volumineuses et complexes, des fuites de mémoire peuvent toujours se produire. Cet article présentera quelques méthodes courantes pour localiser et résoudre les problèmes de fuite de mémoire dans le développement du langage Go. Tout d’abord, nous devons comprendre ce qu’est une fuite de mémoire. En termes simples, une fuite de mémoire fait référence au

Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap - Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap - Comment localiser l'emplacement du téléphone portable de l'autre partie sur Amap Apr 01, 2024 pm 02:11 PM

1. Cliquez pour accéder au logiciel de cartographie Amap sur votre téléphone mobile. 2. Cliquez sur Mon dans le coin inférieur droit. 3. Cliquez pour accéder à la carte familiale. 4. Cliquez sur Créer ma carte familiale. 5. Une fois la création réussie, un code d'invitation apparaîtra et pourra être partagé avec un autre téléphone mobile.

Comment retrouver rapidement l'emplacement d'un téléphone Huawei après sa perte ? Comment retrouver rapidement l'emplacement d'un téléphone Huawei après sa perte ? Mar 24, 2024 am 08:48 AM

Dans la société actuelle, les téléphones portables sont devenus un élément indispensable de nos vies. En tant que marque de smartphones bien connue, les téléphones mobiles Huawei sont profondément appréciés des utilisateurs. Cependant, avec la popularité des téléphones mobiles et l’augmentation de la fréquence d’utilisation, les téléphones portables sont souvent perdus. Une fois notre téléphone perdu, nous avons tendance à nous sentir anxieux et confus. Alors, si malheureusement vous perdez votre téléphone Huawei, comment retrouver rapidement son emplacement ? Étape 1 : Utilisez la fonction de positionnement du téléphone mobile. Les téléphones mobiles Huawei disposent de puissantes fonctions de positionnement intégrées. Les utilisateurs peuvent utiliser l'option « Sécurité » dans les paramètres du téléphone mobile.

Comment changer les informations de localisation et comment modifier l'adresse Comment changer les informations de localisation et comment modifier l'adresse Mar 12, 2024 pm 09:52 PM

Nous savons tous très clairement que Taku APP est une plateforme de chat et sociale très fiable. Elle permet désormais à tout le monde de se faire des amis en ligne. Certaines des formes de se faire des amis ici permettent principalement aux gens de se faire des amis par emplacement. Après tout, il peut localiser automatiquement vos informations de localisation actuelles et mieux vous mettre en contact avec des amis proches les uns des autres dans la même ville, afin que tout le monde puisse discuter plus facilement et se sentir spécial, plusieurs fois. Afin de faire connaissance avec plus d'amis ailleurs, chacun a l'idée de modifier son adresse, mais il ne sait pas comment modifier ses informations de localisation, ce qui est très difficile, donc l'éditeur de ce site. a également collecté des informations spécifiques

Introduction à la suppression d'une page de contenu dans Word Introduction à la suppression d'une page de contenu dans Word Mar 26, 2024 am 10:06 AM

Titre : Introduction à la suppression d'une page de contenu dans Word Lors de la modification d'un document à l'aide de Microsoft Word, vous pouvez parfois rencontrer une situation dans laquelle vous devez supprimer le contenu d'une certaine page. Vous souhaiterez peut-être supprimer une page vierge ou un contenu inutile. sur une certaine page du document. En réponse à cette situation, nous pouvons adopter certaines méthodes pour supprimer rapidement et efficacement une page de contenu. Ensuite, quelques méthodes pour supprimer une page de contenu dans Microsoft Word seront présentées. Méthode 1 : Supprimer le contenu d'une page Tout d'abord, ouvrez le document Word qui doit être modifié. Certainement

See all articles