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

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>

2.css

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

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

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!