Maison  >  Article  >  interface Web  >  Comment mettre la fenêtre en haut en javascript

Comment mettre la fenêtre en haut en javascript

藏色散人
藏色散人original
2021-10-14 15:00:453630parcourir

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)
        }

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!

Déclaration:
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