JS implémente afficher/masquer les éléments de position fixe de la fenêtre en tant que compétences page scrolls_javascript

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é.

Laissez-moi d'abord vous montrer les rendus :

1.html

<p id="selected-case-count"><span class='form-control'>已选: <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 correspond aux connaissances que l'éditeur a partagées avec vous sur l'implémentation JS de l'affichage/masquage des éléments à position fixe dans les fenêtres pendant le défilement de la page. J'espère que cela vous sera utile !