Saya mempunyai pelampung tajuk yang hilang apabila anda menatal ke bawah halaman. Berfungsi dengan baik, cuma bukan pada iPad saya.
Apabila saya menatal ke atas halaman, menu navigasi muncul seperti yang diharapkan, tetapi sebaik sahaja saya melepaskan halaman, ia hilang semula. Ia juga muncul apabila halaman mencapai bahagian bawah
<!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>
Laman web ini dibina menggunakan vuejs
Bahagian berkaitan:
<!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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya telah lama bergelut dengan masalah ini, jadi inilah yang saya dapati:
Masalahnya ialah pada iOS, halaman melantun di sekeliling tepi atas dan bawah, jadi nilai window.pageYOffset boleh menjadi negatif dan lebih besar daripada ketinggian halaman sebenar. Oleh itu syarat
prevScrollpos >= currentScrollPostidak mencukupi.Satu penyelesaian adalah untuk melumpuhkan kesan lantunan dengan menambahkan
overscroll-behavior: none;pada elemen html.Penyelesaian yang betul ialah memanjangkan keadaan kepada kes tepi:
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"; }