Here's a crap example of keeping the element on the page scrolling in
both directions. I suggest you start from here and add whatever fancy
stuff you want for sliding it around, delaying, offsetting etc.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title></title>
<script src="mootools-1.2/mootools-1.2-core-yc.js" type="text/
javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent('scroll', function(){
var coords = $('floater').getCoordinates();
var pageSize = window.getSize();
var pageScroll = window.getScroll();
if (coords.top < pageScroll.y) {
$('floater').setStyle('top', pageScroll.y);
}
if (coords.bottom > pageScroll.y+pageSize.y) {
$('floater').setStyle('top', pageScroll.y+pageSize.y-
coords.height);
}
});
</script>
</head>
<body>
<div style="height: 3000px;"></div>
<div id="floater" style="position: absolute; right: 0px; top:
0px; width: 50px; height: 50px; background-color: red"></div>
</body>
</html>
On 19-Sep-08, at 7:12 AM, Tetsuo wrote:
I've seen only 1 or 2 examples of fixing an element onto a page using
MooTools, making the element scroll with the window, or a position
relative to the window, as the page is scrolled up and down. This is
the most basic example I can find:
window.addEvent('scroll', function(){
$('id-name').setStyle('top', Window.getScrollTop()+'px');
});
The problem is I'd like add effects so that, for instance, there is a
delay on the element scrolling with the window using Transitions, and
also the ability to specify the duration on this.
Also, I'd like to start the event only when the element "hits" the
window pane, rather than always being stuck to the browser window.
Basically, I want this (see URL), but in MooTools, not JQuery!:
http://kitchen.net-perspective.com/open-source/scroll-follow/
Any idea's appreciated
Thanks
