JS melaksanakan paparan/sembunyikan elemen kedudukan tetap tetingkap sebagai kemahiran scrolls_javascript halaman

Elemen dipaparkan pada kedudukan tetap dalam tetingkap Apabila ketinggian halaman lebih besar daripada ketinggian tertentu dan halaman ditatal ke bawah, elemen dipaparkan apabila kedudukan halaman kurang daripada ketinggian tertentu atau halaman ditatal ke atas, elemen disembunyikan.

Biar saya tunjukkan renderingnya dahulu:

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

Di atas ialah pengetahuan yang telah dikongsi oleh editor dengan anda tentang pelaksanaan JS untuk memaparkan/menyembunyikan elemen kedudukan tetap dalam tetingkap semasa halaman menatal saya harap ia akan membantu!