Maison interface Web js tutoriel javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

May 16, 2016 pm 05:43 PM
固定 滚动 haut

现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码

复制代码 代码如下:
















menuFixed.js 代码
复制代码 代码如下:

function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

最后需要说明的是,该效果在 ie6 下不支持,因为 ie6 不支持 position:fixed;
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
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

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

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)

Convertir le disque fixe VirtualBox en disque dynamique et vice versa Convertir le disque fixe VirtualBox en disque dynamique et vice versa Mar 25, 2024 am 09:36 AM

Lors de la création d'une machine virtuelle, il vous sera demandé de sélectionner un type de disque, vous pouvez sélectionner un disque fixe ou un disque dynamique. Et si vous choisissez des disques fixes et réalisez plus tard que vous avez besoin de disques dynamiques, ou vice versa, vous pouvez convertir l'un en l'autre ? Dans cet article, nous verrons comment convertir un disque fixe VirtualBox en disque dynamique et vice versa. Un disque dynamique est un disque dur virtuel qui a initialement une petite taille et qui augmente à mesure que vous stockez des données dans la machine virtuelle. Les disques dynamiques sont très efficaces pour économiser de l'espace de stockage, car ils n'occupent que l'espace de stockage de l'hôte nécessaire. Cependant, à mesure que la capacité du disque augmente, les performances de votre ordinateur peuvent être légèrement affectées. Les disques fixes et les disques dynamiques sont couramment utilisés dans les machines virtuelles

Comment définir un fond d'écran de verrouillage d'ordinateur qui ne changera pas Comment définir un fond d'écran de verrouillage d'ordinateur qui ne changera pas Jan 17, 2024 pm 03:24 PM

D'une manière générale, le motif d'arrière-plan du bureau d'un ordinateur peut être ajusté par l'utilisateur. Cependant, certains utilisateurs de Windows 10 souhaitent pouvoir corriger l’image d’arrière-plan du bureau sur leur ordinateur, mais ils ne savent pas comment la définir. En fait, c’est très simple et facile à utiliser. Comment réparer le fond d'écran de l'écran de verrouillage de l'ordinateur sans le modifier 1. Cliquez avec le bouton droit sur l'image que vous souhaitez définir et sélectionnez Définir comme image d'arrière-plan 2. Win+R pour ouvrir et exécuter, puis entrez « gpedit.msc » 3. Développez jusqu'à : Configuration utilisateur - Modèles de gestion - Panneau de configuration-Personnalisation 4. Cliquez sur Personnalisation, puis sélectionnez "Empêcher les modifications de l'arrière-plan du bureau". 5. Sélectionnez Activé 6. Ouvrez ensuite les paramètres et entrez l'arrière-plan. Lorsque vous voyez ces petits mots, cela signifie que c'est le cas. a été mis en.

Comment garder le panneau des widgets toujours visible dans Windows 11 Comment garder le panneau des widgets toujours visible dans Windows 11 Aug 13, 2023 pm 07:13 PM

Comment toujours afficher le tableau des widgets lors de l’ouverture sous Windows 11 ? Eh bien, vous pouvez commencer par télécharger et installer les dernières mises à jour Windows. Dans le dernier correctif de mise à jour du programme Insider, Microsoft a révélé que les utilisateurs des canaux Développement et Canary pourront épingler le tableau des widgets afin qu'il soit toujours visible d'un coup d'œil. Comment toujours afficher le tableau des widgets ouvert dans Windows 11 Selon Microsoft, pour épingler un tableau à ouvrir, cliquez simplement sur l'icône en forme de punaise dans le coin supérieur droit du tableau. Une fois votre tableau épinglé ouvert, le tableau des widgets n'ignorera plus la fermeture. Pendant que le tableau est épinglé, vous pouvez toujours le fermer en ouvrant le tableau des widgets via le bouton Widgets de la barre des tâches. quand le widget

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

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 implémenter l'effet de défilement plein écran dans Vue Comment implémenter l'effet de défilement plein écran dans Vue Nov 08, 2023 am 08:42 AM

Comment obtenir un effet de défilement plein écran dans Vue Dans la conception Web, l'effet de défilement plein écran peut offrir aux utilisateurs une expérience de navigation très unique et fluide. Cet article expliquera comment obtenir l'effet de défilement plein écran dans Vue.js, ainsi que des exemples de code spécifiques. Afin d'obtenir l'effet de défilement plein écran, nous devons d'abord utiliser le framework Vue.js pour construire le projet. Dans Vue.js, nous pouvons utiliser vue-cli pour créer rapidement un squelette de projet. Ensuite, nous devons introduire des bibliothèques tierces pour obtenir l'effet de défilement, comme la pleine page

Comment épingler des notes d'ordinateur sur le bureau Comment épingler des notes d'ordinateur sur le bureau Feb 15, 2024 pm 04:00 PM

Le système d'exploitation Windows 10 est pré-intégré avec une fonction de note pratique afin que les utilisateurs estimés puissent rédiger des notes ou des messages temporaires à leur guise. Supposons que vous souhaitiez l'utiliser comme un outil pour trouver et utiliser des notes autocollantes rapidement et facilement, ou que vous souhaitiez épingler ce petit programme pratique au centre du grand écran pour une référence facile. Vous pouvez réaliser les souhaits ci-dessus en quelques simples. étapes : Comment épingler des pense-bêtes sur votre ordinateur Sur le bureau 1. Cliquez sur Démarrer, puis cliquez sur le pense-bête ici 2. Après avoir ouvert le pense-bête, vous pouvez directement saisir le contenu correspondant ici, et vous pouvez également cliquer sur le signe plus. ci-dessus pour ajouter un tout nouveau contenu. 3. Si vous souhaitez utiliser un tiers Si vous disposez d'un logiciel de prise de notes, vous pouvez saisir les paramètres du logiciel correspondant à utiliser.

See all articles