페이지를 아래로 스크롤하면 사라지는 제목 플로트가 있습니다. 잘 작동하는데 내 iPad에서는 작동하지 않습니다.
페이지를 위로 스크롤하면 예상대로 내비게이션 메뉴가 나오다가 페이지에서 손을 떼자마자 다시 사라집니다. 페이지가 하단에 도달할 때도 나타납니다
으아아아
이 웹사이트는 vuejs를 사용하여 구축되었습니다
관련 부품:
<!doctype html>
<html>
<head>
<title>Our Funky HTML Page</title>
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
<style>
.main-header {
width: 100%;
position: fixed;
top: 0;
background-color: #ffff00;
padding: 0.5rem 2.0rem 0.5rem 1.9rem;
height: 7.0rem;
z-index: 50;
display: flex;
margin: auto;
align-items: center;
justify-content: space-between;
transition: top 0.4s; /* Transition effect when sliding down (and up) */
}
.content {
width: 100%;
background-color: #ff0000;
height: 2000px;
}
</style>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
// if ( ( (prevScrollpos > currentScrollPos) || ( currentScrollPos < 50 ) ) ){
if ( ( (prevScrollpos >= currentScrollPos) ) ){
document.getElementById("main-header").style.top = "0rem";
} else {
document.getElementById("main-header").style.top = "-8rem"; // "-70px";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body>
<div class="main-header" id="main-header"></div>
<div class="content" ></div>
</body>
</html> 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
저는 한동안 이 문제로 고생했는데, 제가 찾은 내용은 다음과 같습니다.
문제는 iOS에서 페이지가 위쪽과 아래쪽 가장자리 주위로 튀기 때문에 window.pageYOffset 값이 음수일 수 있고 실제 페이지 높이보다 클 수 있다는 것입니다. 따라서
prevScrollpos >= currentScrollPos조건은 충분하지 않습니다.한 가지 해결책은 html 요소에
overscroll-behavior: none;를 추가하여 바운스 효과를 비활성화하는 것입니다.올바른 해결책은 조건을 극단적인 경우로 확장하는 것입니다.