Maison > interface Web > js tutoriel > le corps du texte

Comment mettre la fenêtre en haut en javascript

藏色散人
Libérer: 2021-10-14 15:00:45
original
3642 Les gens l'ont consulté

Comment implémenter le haut de la fenêtre à l'aide de JavaScript : 1. Créez un exemple de fichier frontal ; 2. Obtenez la distance entre l'élément et le haut de la fenêtre du navigateur via getBoundingClientRect ;

Comment mettre la fenêtre en haut en javascript

L'environnement d'exploitation de cet article : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Comment garder la fenêtre au premier plan avec JavaScript ?

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é certaines, cela semble plus compliqué, j'en ai besoin pour quelque chose que j'ai fait récemment, j'ai donc également recherché des informations. sur Internet, et j'ai finalement trouvé une méthode getBoundingClientRect () permettant d'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)
        }
Copier après la connexion

Le but principal de l'utilisation des boucles est de rendre les éléments en haut discrets. Ce processus peut être réalisé en modifiant i++. En même temps, une chose à noter est que si l'instruction for. utilise var i au lieu de let i, timer Vous devez l'envelopper avec une fonction d'exécution immédiate pour vous assurer que je peux 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 sur les bases de 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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal