Comment utiliser getBoundingClientRect() pour obtenir un défilement fixe des conteneurs div

Cette fois, je vais vous montrer comment utiliser getBoundingClientRect() pour réaliser le défilement et la correction des conteneurs div, et comment utiliser getBoundingClientRect() pour réaliser le défilement et la correction des conteneurs div Quelles sont les précautions. ? Ce qui suit est un cas pratique. Jetons un coup d'oeil.

La méthode ele.getBoundingClientRect() consiste à obtenir la position d'un élément dans toute la fenêtre de vue

Les valeurs qui peuvent être renvoyées sont la largeur, hauteur, top, left, x,y,right,bottom

Scène

Quand un de vos divs est au milieu de viewport

L'effet que vous souhaitez est que lorsque la page défile jusqu'à ce div, ce div est fixé en haut de la page, et les autresdéfilent inchangés

idée

Réaliser ceci L'idée est d'utiliser cette méthode pour obtenir la valeur supérieure de ce div

Cette valeur supérieure est la valeur supérieure de ce div dans la fenêtre

Écouter le défilement de la page Événement et puis quand ceci Lorsque la valeur supérieure est

pour obtenir un tel effet

Je vous crois J'ai maîtrisé la méthode après avoir lu ces cas , pour un contenu plus passionnant, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Quelles sont les différences entre la méthode d'écriture standard du HTML et le code généré par Dreamweaver ?,

Comment l'ajouter dans des fichiers au format vidéo flash html (flv, swf)

Comment définir l'entrée sur un effet en lecture seule via désactivé et lecture seule

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!