페이지 스크롤 시 JS를 사용하여 창 고정 위치 요소 표시/숨기기

페이지 높이가 특정 높이보다 크고 페이지가 아래로 스크롤되면 요소가 창의 고정 위치에 표시됩니다. 페이지 위치가 특정 높이보다 작거나 페이지가 스크롤되면 요소가 표시됩니다. 이 글에서는 페이지 스크롤 시 창 고정 위치 요소 표시/숨기기를 소개합니다. 필요한 친구는 이를 참조할 수 있습니다.

창 고정 위치 표시 요소. 특정 높이보다 크고 페이지가 아래로 스크롤되면 페이지 위치가 특정 높이보다 작을 때 요소가 표시되거나 페이지가 위로 스크롤되면 요소가 숨겨집니다.

먼저 렌더링을 보여드리겠습니다.

1.html

<p id="selected-case-count"><span class=&#39;form-control&#39;>已选: <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();
});
});

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

Vue2를 사용하여 3단계 연결을 구현하는 방법

JavaScript에서 단일 연결 목록과 순환 연결 목록을 사용하는 방법

풀다운 새로 고침 문제를 해결하는 방법 모바일 브라우저의 선두

위 내용은 페이지 스크롤 시 JS를 사용하여 창 고정 위치 요소 표시/숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!