Stick to top
Does this effect have a name?
HTML
<p>Fry! Quit doing the right thing, you jerk! Stop it, stop it. It's fine. I will 'destroy' you! Goodbye, cruel world. Goodbye, cruel lamp. Goodbye, cruel velvet drapes, lined with what would appear to be some sort of cruel muslin and the cute little pom-pom curtain pull cords. Cruel though they may be… Then we'll go with that data file!</p>
<div class="span4" style="height:1000px;">
<div id="iphone-frame">
<div id="iphone">
<div id="iframe-iphone">
<h1><div id="titlePreview"></div></h1>
<h2><div id="subtitlePreview"></div></h2>
<p><div id="contentPreview"></div></p>
</div>
</div>
<div id="iphone-shadow"></div>
<div class="sticker"><p>If you scroll down, this should stick to the top!</p></div>
<p>I don't want to be rescued. Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? I don't 'need' to drink. I can quit anytime I want!</p>
<p>For example, if you killed your grandfather, you'd cease to exist! Then throw her in the laundry room, which will hereafter be referred to as "the brig". I videotape every customer that comes in here, so that I may blackmail them later.</p>
<p>You don't know how to do any of those. Well, let's just dump it in the sewer and say we delivered it. It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you? I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope?</p>
<p>You wouldn't. Ask anyway! Soothe us with sweet lies. Is today's hectic lifestyle making you tense and impatient? Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain. As an interesting side note,...
CSS
body {
margin:0;
padding:0;
background-image: -moz-linear-gradient(top, #ddd, #fff);
background-image: -webkit-linear-gradient(top, #ddd, #fff);
}
.sticker{
background-image: -moz-linear-gradient(top, #ffe, #ffc);
background-image: -webkit-linear-gradient(top, #ffe, #ffc);
margin: 0 0 10px;
top: 0;
left: 0;
width: 100%;
overflow:hidden;
}
p { margin: 0 0 10px;
}
div p {
margin:0;
padding: 10px 5px;
}
JavaScript
jQuery(document).ready(function($) {
offset = $('.sticker').offset();
var fromtop = offset.top;
var bottom = $('.sticker').parent().height();
$(document).scroll(function() {
doc = $(this);
dist = $(this).scrollTop();
if (dist >= fromtop && dist <= bottom) {
$('.sticker:last').show();
$('.sticker:first').css({
'position': 'fixed'
});
} else {
$('.sticker').css({
'position': 'static'
});
}
});
});