JSはページスクロールとしてウィンドウの固定位置要素の表示/非表示を実装します_javascriptスキル

ページの高さが特定の高さよりも大きい場合、要素はウィンドウ内の固定位置に表示され、ページが下にスクロールされると、要素はページの位置が特定の高さよりも小さい場合に表示されます。上にスクロールすると、要素が非表示になります。

まずレンダリングを見てみましょう:

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

上記は、ページのスクロールに応じてウィンドウ内の固定位置要素を表示/非表示にする JS 実装について編集者が共有した知識です。お役に立てば幸いです。