我正在尝试开发一个应用程序，但我遇到了一个问题。你知道真正的应用程序，如Apple的快捷键或Cydia，当你滚动它们都有顶部标题的影响，我有两个例子：https://streamable.com/j5yu5
我试图这样做，它确实可以在电脑上运行，但不能在我的手机上运行（iPhone 7+，运行iOS 12.1.1，越狱，尝试全屏野生动物园，webclip）
这是我现在的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adam Izgin</title>
<script src="http://koda.nu/arkivet/94004581"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<style>
* {
font-family: Chalkboard SE;
}
html, body {
background: #fff;
scroll-behavior: smooth;
}
body {
height: 150vh;
}
#header {
width: 100vw;
height: 50px;
background: #fff;
position: fixed;
top: 0;
left: 0;
}
#title {
font-size: 20px;
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 250ms ease-in-out;
}
.title {
margin: 40px 20px;
font-weight: 900;
font-size: 30px;
opacity: 1;
}
#top {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
$(document).ready(function() {
get('html').end(function() {
if (html.scrollTop > 30) {
alert('Hello, World!');
};
});
});
</script>
</head>
<body>
<div id="top"></div>
<div id="header">
<h1 id="title">text</h1>
</div>
<h1 class="title" id="title1">text</h1>
</body>
</html>以全屏方式打开片段，并作为移动设备进行检查并使用鼠标拖动而不是滚动。这适用于我的电脑，但不适用于我的手机。有任何想法吗？提前致谢。
ps：get-function与jQuery的$相同，end-function与ontouchend相同
经过大量的研究，我想出了一个解决方案。 document.documentElement.scrollTop在移动浏览器中不起作用，因此我们必须使用window.pageYOffset。