페이지 높이가 특정 높이보다 크고 페이지를 아래로 스크롤하면 요소가 창의 고정 위치에 표시됩니다. 위로 스크롤하면 요소가 숨겨집니다.
먼저 렌더링을 보여드리겠습니다.
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 구현에 대해 편집자가 공유한 지식입니다. 도움이 되기를 바랍니다.