Your issue has to do with how css works. Without testing or seeing your code
what I would do is attach a 'beforeStart' event to may drag objects. Just
before it is about to be dragged I would move the object outside of the
scroll area, reattaching it somewhere in the DOM but at the same time
calculating the position so I can position it exactly where it was at. This
bring up other issues. 1. When you move it out of the scrollarea it will
effectively loose its position. So you could do something with clone.




On Fri, Sep 19, 2008 at 8:43 AM, Paul Spencer <[EMAIL PROTECTED]> wrote:

>
> 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
>>
>
>

Reply via email to