Skip to content

Instantly share code, notes, and snippets.

@jasonyarrington

jasonyarrington/jsbin.hedudedi.css

Created July 29, 2014 23:14
Show Gist options
  • Save jasonyarrington/3f340c7d2cd5b389c83e to your computer and use it in GitHub Desktop.
Save jasonyarrington/3f340c7d2cd5b389c83e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.hedudedi.css
body {
background-color: blue;
}
.top-spacer {
height: 100px;
}
.wrapper {
border: 1px solid orange;
overflow: hidden;
}
.content {
border: 1px solid blue;
background-color: red;
}
.spacer {
height: 5000px;
}
Raw
jsbin.hedudedi.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="translate3d window shade" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="top-spacer">spacer</div>
<div class="wrapper">
<div class="content">
This is me
</div>
</div>
<div class="spacer">spacer</div>
</body>
</html>
Raw
jsbin.hedudedi.js
$(window).on('scroll', function() {
var s = $(window).scrollTop();
console.log(s);
$('.wrapper').css('transform', 'translate3d(0,' + s + 'px, 0)');
$('.content').css('transform', 'translate3d(0,' + -s + 'px, 0)');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment