Menu
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
644
The reason is because the mobile ios doesn’t know what $ (‘html,body’) is you have to animate $ (“body”) instead. Thanks to the navigator.userAgent we know the device and discriminate the if-else. scrollTo can’t use fancy animations like jquery animate, but it does the job. That’s all folks.
Thanks to the navigator.userAgent we know the device and discriminate the if-else. scrollTo can’t use fancy animations like jquery animate, but it does the job. That’s all folks.
which is fine, but as i said, it’s not working on mobile devices. The solution? Here we are The reason is because the mobile ios doesn’t know what $ (‘html,body’) is you have to animate $ (“body”) instead.
Now, if your content div or image or whatever exceeds the size of the viewport width (320 dips on iPhone) you can scroll on the x axis. The same is true for the y axis with different values though.
After a lot of research I came up with a solution. document.documentElement.scrollTop does not work in mobile browsers, so we have to use window.pageYOffset instead.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
