I have a title float that disappears when you scroll down the page. Works fine, just not on my iPad.
When I scroll up the page, the navigation menu appears as expected, but as soon as I let go of the page, it disappears again. It also appears
when the page reaches the bottom
<!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>
This website is built using vuejs
Relevant parts:
<!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";
}
prevScrollpos = currentScrollPos;
}
</script>
</head>
<body>
<div class="main-header" id="main-header">
</div>
<div class="content" >
</div>
</body>
</html> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I've been struggling with this problem for a while, so here's what I found:
The problem is that on iOS, the page bounces around the top and bottom edges, so the window.pageYOffset value can be negative and larger than the actual page height. Therefore the condition
prevScrollpos >= currentScrollPosis not enough.One solution is to disable the bounce effect by adding
overscroll-behavior: none;to the html element.The correct solution is to extend the condition to edge cases:
const maxScrollHeight = document.body.scrollHeight - window.innerHeight; if (prevScrollpos >= currentScrollPos && currentScrollPos 0) { // Prevent hiding header on top overscroll document.getElementById("main-header").style.top = "-8rem"; }