Maison > Article > interface Web > Comment atteindre le meilleur positionnement en javascript
Comment atteindre le meilleur positionnement en javascript
- 藏色散人original
- 2021-10-25 14:30:584826parcourir
Comment implémenter la fonction top en JavaScript : 1. Obtenez la distance entre l'élément et le haut de la fenêtre du navigateur via getBoundingClientRect ; 2. Implémentez la fonction top via "$(document).scrollTop() for(.. .)" méthode.
L'environnement d'exploitation de cet article : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
JavaScript implémente la fonction épinglée
Il existe de nombreuses façons d'implémenter la fonction épinglée avec JavaScript. J'en ai déjà utilisé quelques-unes. Cela semble un peu compliqué pour quelque chose que j'ai fait récemment, j'ai donc également cherché. pour quelques informations sur Internet et j'ai finalement trouvé une méthode. getBoundingClientRect() peut obtenir la distance entre l'élément de page et le haut de la fenêtre du navigateur.
Le code final est le suivant :
let len = document.getElementById('flexbox').getBoundingClientRect().top;//获取元素到浏览器视窗顶部的距离
//$(document).scrollTop()为滚动条的高度
for (let i = $(document).scrollTop(); i < len + $(document).scrollTop(); i++) {
setTimeout(function () {
window.scrollTo(0, i);
}, 0)
}
Le but principal de l'utilisation des boucles est de rendre les éléments en haut discrets. Ce processus peut être réalisé en changeant i++. En même temps, il convient de noter que si le for. L'instruction utilise var i au lieu de let i. La minuterie doit être enveloppée dans une fonction d'exécution immédiate pour garantir que je puisse prendre effet immédiatement.
Les effets du collage au sommet et aux points d'ancrage obtenus de cette manière sont similaires. Si vous souhaitez obtenir un sommet flottant (une certaine partie est fixée sur le dessus), vous pouvez envisager d'utiliser position:fixed pour y parvenir.
C'est tout. . . .
【Apprentissage recommandé : Tutoriel de base javascript】
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!