Skip to content

Instantly share code, notes, and snippets.

@bootjp

bootjp/sample.html

Last active November 30, 2015 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bootjp/4407ea31e22439cf3a90 to your computer and use it in GitHub Desktop.
Save bootjp/4407ea31e22439cf3a90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iOS9 fixed element delay bug?</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<body>
<p>scroll pages!!</p>
<div class="sample_element" style="position: fixed;top: 30px;">this is fixed</div>
<div class="sample_element" style="position: absolute;color: #333; top: 250px;">this is absolute</div>
<style>
.sample_element {
display: none;
}
</style>
<script type="text/javascript">
var changePosition = 50;
function scrollController() {
if (window.scrollY < changePosition) {
document.getElementById('msg').innerHTML = "<strong>In if statement.</strong>";
Array.prototype.slice.call(document.getElementsByClassName('sample_element')).forEach(function(element) {
element.style.display = 'block'
});
} else {
document.getElementById('msg').innerHTML = "<strong>In else statement.</strong><br/ >Up pages";
Array.prototype.slice.call(document.getElementsByClassName('sample_element')).forEach(function(element) {
element.style.display = 'none'
});
}
}
document.addEventListener('touchmove', function() {
scrollController();
}, false);
document.addEventListener('scroll', function() {
scrollController();
}, false);
</script>
<div id="msg" style="position: fixed;bottom: 0px"></div>
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment