JavaScript를 사용하여 html 주체에서 scroll top의 클래스를 삭제하고 scroll down을 추가하는 방법.

1133 단어
여기서 우리는 간단한 자바스크립트를 작성하여 html 주체에서 클래스를 삭제하고 스크롤 맨 위에 클래스를 추가할 것이다. 이것은 모바일 응답 웹 디자인에서 가장 자주 사용되고 사이트 내비게이션 표시줄을 표시하고 숨기는 데 사용된다.클래스의 도움말 아래 일부 CS3 변환이 있는 탐색 모음을 숨기고 표시할 수 있습니다. 이 클래스는 자바스크립트의 도움말 아래 추가하고 삭제할 수 있습니다.
JavaScript 코드 세그먼트.
// javascript for remove class on scroll top and add on scroll down 
var lastScrollTop = 0;
var body = document.body;
window.addEventListener("scroll",function(){
var scrollTop = window.pageYOffset || document
.documentElement.scrollTop;
if(scrollTop > lastScrollTop){
    body.classList.remove("shownavbar");
}
else{
    body.classList.add("shownavbar");
}
lastScrollTop = scrollTop;
});
JavaScript 화면 캡처의 위쪽 스크롤 동작

JavaScript 스크린샷에 대한 아래로 스크롤 동작

좋은 웹페이지 즐겨찾기