Skip to content

Instantly share code, notes, and snippets.

@wecing

wecing/t.html

Created August 30, 2013 19:03
Show Gist options
  • Save wecing/6393222 to your computer and use it in GitHub Desktop.
Save wecing/6393222 to your computer and use it in GitHub Desktop.
Download ZIP
Android 4.3 default browser bug
Raw
t.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>T</title>
<style>
body {
margin: 0; padding: 0;
}
#div-1 {
width: 100%; height: 300px;
margin: 0; padding: 0;
}
#header-container {
position: relative;
top: 0;
height: 350px;
width: 100%;
margin: 0; padding: 0;
}
#header-container nav {
// opacity: 0.95; // cannot do this
background-color: white;
font-size: 70px;
}
#header-container div {
height: 50px; width: 100%;
background:radial-gradient(farthest-side at 50% 0,rgba(0,0,0,0.15),rgba(0,0,0,0));
background:-webkit-radial-gradient(50% 0,farthest-side,rgba(0,0,0,0.15),rgba(0,0,0,0));
}
#header-container.sticky {
position: fixed;
}
#header-container.sticky nav {
opacity: 0.95; // but have to do it here
}
</style>
</head>
<body>
<div id="div-1">
</div>
<div id="header-container">
<nav>
<span>Hello?</span>
<span>World?</span>
<span>Yeehaw?</span>
</nav>
<div>
</div>
</div>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<p style="font-size: 100px">
dafuq?
</p>
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', 'event', 'event-touch', function (Y) {
var isSticky = false;
function changeSticky() {
var c = Y.one('#header-container');
var navOffset = 300;
if (document.body.scrollTop > navOffset) {
if (!isSticky) { // make it sticky
// c.setStyle('position', 'fixed');
c.addClass('sticky');
}
isSticky = true;
} else {
if (isSticky) { // revert
// c.setStyle('position', 'relative');
c.removeClass('sticky');
}
isSticky = false;
}
}
Y.one('doc').on('touchmove', function (e) {
changeSticky();
});
Y.one('doc').on('touchend', function (e) {
changeSticky();
});
Y.one('doc').on('scroll', function (e) {
changeSticky();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment