Titre : Maîtrisez l'attribut supérieur dans la définition des attributs CSS de jQuery

En tant que développeur front-end, il est très important de maîtriser les compétences de jQuery exploitant les éléments DOM. Parmi elles, la définition des propriétés CSS est l’une des opérations les plus élémentaires et les plus couramment utilisées. Cet article se concentrera sur la façon d'utiliser jQuery pour définir l'attribut supérieur dans les attributs CSS.

1. Qu'est-ce que l'attribut top ? En CSS, l'attribut top est une méthode permettant de définir la position d'un élément par rapport au haut de son élément parent. En règle générale, la valeur de l'attribut est en pixels (px) et la plage de valeurs est négative, 0 et positive. Par exemple, lorsque la valeur supérieure est de 10 px, cela signifie que l'élément est décalé vers le bas de 10 unités de pixels par rapport à la bordure supérieure de son élément parent.

2. Comment jQuery définit l'attribut CSS top

jQuery fournit des méthodes qui peuvent être utilisées pour définir les attributs CSS des éléments. Parmi eux, il existe deux façons de définir l'attribut top : la méthode .css() et la méthode .animate().

1. .css() pour définir directement les propriétés CSS de l'élément.

Le format de syntaxe est le suivant :

$(selector).css(property,value)

Parmi eux, property représente la propriété CSS à définir et value représente la valeur de l'attribut à définir.

Par exemple, le code suivant peut définir l'attribut supérieur de l'identifiant de l'élément sur myDiv :

$("#myDiv").css("top", "10px");

2. La méthode .animate() est utilisée pour définir l'effet d'animation de l'élément. La définition de l'attribut supérieur d'un élément peut également être réalisée via la méthode d'animation. Différente de la méthode CSS, la méthode animate peut définir la durée de l'animation et fournir certains effets d'animation. Par exemple, nous voulons déplacer l'identifiant de l'élément myDiv vers le bas de 50 pixels et la durée de l'animation est de 2 secondes (remarque : l'attribut top en CSS définit une position relative, et la position relative ici est la position 50px vers le bas de la position d'origine) :

$("#myDiv").animate({ top: "+=50px"}, 2000);

top ici : "+=50px" signifie ajouter la valeur d'attribut supérieure de la position d'origine de l'identifiant de l'élément maDiv 50 pixels.

3. Cas classique

Ci-dessous, nous utilisons un cas classique pour montrer comment utiliser jQuery pour définir l'attribut supérieur d'un élément. Ce cas consiste à implémenter une boîte flottante fixe sur la page. Lorsque la page défile jusqu'à une certaine distance, la boîte flottante défile avec la page et reste en haut.

Code HTML :

... 正文内容 ...

$("#header").css("top", scrollTop - headerHeight);

$("#header").css("top", "0px");