Een compleet te gebruiken voorbeeld:
<!DOCTYPE html>
<html>
<head>
<title>Titel van de Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Some meta data to be better findable by search engines -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="style/style.css" />
<!-- Inline CSS -->
<style type="text/css">
#meta-container {
position: relative;
margin: 80px 0 160px;
padding: 15px 5px;
width: 200px;
height: 400px;
background-color: #f7f7f7;
}
#meta-float {
//width: 200px;
background-color: #DD4814;
color: #ffffff;
position: relative;
top: 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Between the script tags //<![CDATA[....]]> is needed so the browsers do not parse this code as HTML -->
<script type="text/javascript">
//<![CDATA[
$(function () {
var floater = $('#meta-float'); // Bounds
var container = $('#meta-container'); // Bounds
$(window).scroll(function (event) {
var stop = $(window).scrollTop(),
ctop = container.offset().top,
cheight = container.height(),
fheight = floater.height();
if (!floater.attr('width')) {
floater[0].style.width = floater.width() + 'px';
}
if (ctop < stop && ctop + cheight - fheight > stop) {
if (floater[0].style.position === 'relative') {
floater[0].style.position = 'fixed';
}
} else {
if (floater[0].style.position === 'fixed') {
floater[0].style.position = 'relative';
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="meta-container">
<div id="meta-float">
<p>Some text of the floating add</p>
<br /><br /><br />
<p>An other line of text</p>
</div>
</div>
</body>
</html>
