Heim > Artikel > Web-Frontend > JS implementiert Elemente mit fester Position zum Anzeigen/Ausblenden von Fenstern als Seitenscrolls_javascript-Fähigkeiten
Das Element wird an einer festen Position im Fenster angezeigt und die Seite wird nach unten gescrollt, wenn die Seitenposition kleiner als eine bestimmte Höhe ist Wird nach oben gescrollt, wird das Element ausgeblendet.
Lassen Sie mich Ihnen zuerst die Renderings zeigen:
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(); }); });
Das Obige ist das Wissen, das der Herausgeber mit Ihnen über die JS-Implementierung des Anzeigens/Ausblendens von Elementen mit fester Position in Fenstern beim Scrollen der Seite geteilt hat. Ich hoffe, es wird hilfreich sein!