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>
P粉7528128532024-03-22 21:16:27
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 >= currentScrollPos is 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 < maxScrollHeight) { // Prevent hiding header on bottom overscroll
document.getElementById("main-header").style.top = "0rem";
} else if (currentScrollPos > 0) { // Prevent hiding header on top overscroll
document.getElementById("main-header").style.top = "-8rem";
}