Maison interface Web js tutoriel Code d'implémentation pour que DIV défile lorsque la barre de défilement défile [Recommandé]_jquery

Code d'implémentation pour que DIV défile lorsque la barre de défilement défile [Recommandé]_jquery

May 16, 2016 pm 03:05 PM
div 滚动 滚动条

Je me souviens qu'avant, écrire ce genre de code était fastidieux, mais maintenant c'est beaucoup plus facile avec JQuery. Cela ne prend que quelques lignes de code !

<script type="text/javascript" src="Js/jquery-1.7.2.min.js"></script> 
  <script type="text/javascript"> 
    $(function() { 
      $(window).scroll(function() { 
        var top = $(window).scrollTop()+200; 
        var left= $(window).scrollLeft()+320; 
        $("#editInfo").css({ left:left + "px", top: top + "px" }); 
      }); 
    }); 
  </script> 
 
  <div id="editInfo" style="float:left;width:300px;background-color:#ccc;position:absolute;top:200px;"> 
    <div>用户名:<input type="text" /></div> 
    <div>密码:<input type="text" /></div> 
    <div>年龄:<input type="text" /></div> 
    <div>备注:<input type="text" /></div> 
    <div><input type="button" value="保存" /></div> 
  </div> 
Copier après la connexion

Le code d'implémentation ci-dessus pour que DIV défile pendant que la barre de défilement défile [recommandé] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous prendrez en charge Script Home.

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

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

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)

Microsoft apporte les barres de défilement Fluent de Windows 11 à Google Chrome Microsoft apporte les barres de défilement Fluent de Windows 11 à Google Chrome Apr 14, 2023 am 10:52 AM

Contrairement à Windows 10, Windows 11 propose de nouvelles « barres de défilement fluides » modernes qui changent de forme lorsque les utilisateurs interagissent avec elles. Les barres de défilement Fluent sont de nature dynamique, elles évoluent automatiquement selon différents facteurs de forme ou lorsque vous modifiez la taille de la fenêtre, et elles sont actuellement utilisées dans des applications telles que Paramètres, Lecteurs multimédias, etc. Google Chrome pourrait bientôt disposer d'une fonctionnalité de barre de défilement fluide, selon une nouvelle proposition de Microsoft. Microsoft déclare dans une proposition vouloir moderniser les anciennes barres de défilement dans Chrome

Comment implémenter le défilement vers une position d'élément spécifiée en JavaScript ? Comment implémenter le défilement vers une position d'élément spécifiée en JavaScript ? Oct 22, 2023 am 08:12 AM

Comment implémenter la fonction de défilement vers une position d'élément spécifiée en JavaScript ? Dans une page Web, lorsque nous devons concentrer l'attention de l'utilisateur sur une position d'élément spécifique, nous pouvons utiliser JavaScript pour implémenter la fonction de défilement jusqu'à la position d'élément spécifiée. Cet article présentera comment implémenter cette fonction via JavaScript et fournira des exemples de code correspondants. Tout d’abord, nous devons obtenir les informations de position de l’élément cible. Vous pouvez utiliser Element.getBoundingClient

Comment masquer le défilement de la barre de défilement en réaction Comment masquer le défilement de la barre de défilement en réaction Dec 21, 2022 pm 03:38 PM

Comment masquer le défilement de la barre de défilement dans React : 1. Ouvrez le fichier "react-native" correspondant ; 2. Définissez le défilement horizontal jusqu'à l'horizontale ; 3. Masquez la barre de défilement horizontale en définissant la valeur de "showsHorizontalScrollIndicator" sur "false".

HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique Oct 27, 2023 pm 06:31 PM

HTML, CSS et jQuery : créez un tableau d'affichage à défilement automatique Dans la conception Web moderne, les tableaux d'affichage sont souvent utilisés pour transmettre des informations importantes et attirer l'attention des utilisateurs. Un tableau d'affichage à défilement automatique est largement utilisé sur les pages Web. Il permet au contenu du bulletin de défiler et de s'afficher sur la page sous forme d'animation, améliorant ainsi l'effet d'affichage des informations et l'expérience utilisateur. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un tableau d'affichage à défilement automatique et fournit des exemples de code spécifiques. Tout d'abord, nous avons besoin d'un HT

Surveiller le comportement de défilement des iframes Surveiller le comportement de défilement des iframes Feb 18, 2024 pm 08:40 PM

Comment surveiller le défilement d'une iframe nécessite des exemples de code spécifiques Lorsque nous utilisons la balise iframe pour intégrer d'autres pages Web dans une page Web, nous devons parfois effectuer certaines opérations spécifiques sur le contenu de l'iframe. L'un des besoins courants est d'écouter l'événement de défilement de l'iframe afin que le code correspondant puisse être exécuté lorsque le défilement se produit. Ce qui suit explique comment utiliser JavaScript pour surveiller le défilement d'une iframe et fournit des exemples de code spécifiques à titre de référence. Récupérer l'élément iframe Tout d'abord, nous avons besoin

Comment définir la barre de défilement pour qu'elle s'affiche toujours sur le système Mac - Comment définir la barre de défilement pour qu'elle s'affiche toujours Comment définir la barre de défilement pour qu'elle s'affiche toujours sur le système Mac - Comment définir la barre de défilement pour qu'elle s'affiche toujours Mar 18, 2024 pm 06:22 PM

Récemment, certains amis ont consulté l'éditeur sur la façon de configurer la barre de défilement du système Mac pour qu'elle soit toujours affichée. Ce qui suit vous présentera la méthode pour configurer la barre de défilement du système Mac pour qu'elle soit toujours affichée. Les amis dans le besoin peuvent venir apprendre. plus. Étape 1 : Dans le menu Démarrer du système, sélectionnez l'option [Préférences Système]. Étape 3 : Sur la page Préférences Système, sélectionnez l'option [Général]. Étape 3 : Sur la page générale, sélectionnez [Toujours] pour afficher les barres de défilement.

Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div Jan 30, 2023 am 09:23 AM

Méthode CSS pour réaliser qu'il manque un coin à un div : 1. Créez un exemple de fichier HTML et définissez un div ; 2. Définissez la couleur d'arrière-plan de la largeur et de la hauteur du div 3. Ajoutez une pseudo-classe au div qui doit être supprimé ; un coin et définissez la pseudo-classe sur Utiliser la même couleur que la couleur d'arrière-plan, puis faites-la pivoter de 45 degrés, puis positionnez-la sur le coin qui doit être supprimé.

Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT May 01, 2023 pm 03:28 PM

Préface Récemment, il existe un script de navigateur basé sur ChatGPTAPI sur GitHub, openai-translator. En peu de temps, l'étoile a atteint 12k. En plus de prendre en charge la traduction, elle prend également en charge les fonctions de polissage et de synthèse. -ins, il utilise également le packaging tauri. Si vous avez un client de bureau, outre le fait que tauri utilise la partie rust, la partie navigateur est encore relativement simple à implémenter. Aujourd'hui, nous allons l'implémenter manuellement. L'interface fournie par openAI, par exemple, nous pouvons copier le code suivant et lancer une requête dans la console du navigateur pour terminer la traduction //Exemple constOPENAI_API_KEY="s

See all articles