Maison > interface Web > js tutoriel > Utilisez JS pour afficher/masquer les éléments de position fixe de la fenêtre lorsque la page défile

Utilisez JS pour afficher/masquer les éléments de position fixe de la fenêtre lorsque la page défile

不言
Libérer: 2018-06-25 10:23:07
original
2185 Les gens l'ont consulté

L'élément est affiché à une position fixe dans la fenêtre. Lorsque la hauteur de la page est supérieure à une certaine hauteur et que la page défile vers le bas, l'élément est affiché lorsque la position de la page est inférieure à une certaine hauteur de la page ; est défilé vers le haut, l'élément est masqué. Voici une introduction à travers cet article. JS implémente l'affichage/masquage des éléments à position fixe de la fenêtre lorsque la page défile. Les amis qui en ont besoin peuvent se référer à

Éléments d'affichage à position fixe de la fenêtre. . Lorsque la hauteur de la page est supérieure à une certaine hauteur et que la page défile vers le bas, l'élément est affiché ; lorsque la position de la page est inférieure à une certaine hauteur, ou lorsque la page défile vers le haut.

Laissez-moi d'abord vous montrer les rendus :

1.html

<p id="selected-case-count"><span class=&#39;form-control&#39;>已选: <span class="casecount">0</span></span></p>
Copier après la connexion

2.css

p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距顶端举例*/
right:40px; /*距右侧位置*/
color:red; 
}
Copier après la connexion

3. js

$(function() {
$("#selected-case-count").hide();
});
var preTop=0;
var currTop=0;
$(function () {
$(window).scroll(function(){
currTop=$(window).scrollTop();
if(currTop<preTop){
$("#selected-case-count").fadeOut(200);
}elseif ($(window).scrollTop()>600){
$("#selected-case-count").fadeIn(500);
}else{
$("#selected-case-count").fadeOut(500);
}
preTop=$(window).scrollTop();
});
});
Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser Vue2 pour implémenter une liaison à trois niveaux

Comment utiliser des listes à chaînage unique et listes chaînées circulaires en JavaScript

Comment résoudre le problème de l'actualisation déroulante en haut du navigateur mobile

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