Skip to content

Instantly share code, notes, and snippets.

@bakertim
Created April 19, 2013 20:16
Show Gist options
  • Save bakertim/5422937 to your computer and use it in GitHub Desktop.
Save bakertim/5422937 to your computer and use it in GitHub Desktop.
<html>
<head>
<style>
.fixedContainer {
position: fixed;
z-index: 2;
background-color: red;
height: 500px;
width: 1024px;
}
</style>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script>
$().ready( function() {
// The parent container (hopefully relative or static) needs it's width and height set to be it's child values
$('.fixedContainer').each( function() {
var p = $(this).parent();
p.css('width', $(this).width() );
p.css('height', $(this).height() );
});
});
</script>
</head>
<body>
<section>
<div class='fixedContainer'>
<img src='http://placekitten.com/1024/500' />
</div>
</section>
<section style='height: 5000; background-color:green; position: relative; z-index: 4;'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aut, rerum, aspernatur commodi quod quis nesciunt iusto praesentium expedita earum quaerat minus vel vitae voluptatibus maxime. Nemo inventore obcaecati dicta.
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment