You have to figure out whether something is visible or not, and do it so that you make assumptions. Below is a simple example of this. He suggests that the list is a traditional list (in which each item is below the next). He then uses the calculation to determine if the value exceeds the offsetTopheight of the container. You can tweak this to see if something is partially visible or fully visible.
return this.offsetTop + $(this).height() > height;
means applying the effect if the element is not fully visible. In order not to move partially visible objects, change it to:
return this.offsetTop > height;
Full example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var height = $("#container").height();
$("#container li").filter(function() {
return this.offsetTop + $(this).height() > height;
}).wrapAll("<ul>").parent().appendTo("#overflow");
});
</script>
<style type="text/css">
div, ul, li { border: 0 none; padding: 0; margin: 0; }
#container { background: yellow; margin-bottom: 20px; height: 50px; overflow: hidden; }
#overflow { background: #CCC; }
</style>
</head>
<body>
<div id="container">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</div>
<div id="overflow">
</div>
</body>
</html>
A more general solution would be much more tedious. You will need to serve items that are on the left, right, above or below the viewport.