I am trying to develop an application, but I ran into a problem. You know real applications like Apple's Shortcuts or Cydia, when you scroll they all have an effect with the titles at the top, I have two examples here: https://streamable.com/j5yu5
I am trying to do the same, it does work on the computers, but not on my mobile phone (iPhone 7+, running iOS 12.1.1, Jailbroken, tried fullscreen safari, webclip)
here is my code right now:
<!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>open the snippet in fullscreen, and inspect as a mobile and drag with the mouse instead of scrolling. That works on my computer, but not on my phone. Any ideas? thanks in advance.
ps: the get-function is the same as the jQuery's $, and the end-function is the same as ontouchend