Position fixed IE6 + Drag-and-Drop

    Much has been written about that, but not the point ... I was

    puzzled by the following idea: a draggable layer with a fixed position on the screen, a scroll page - the layer remains in place. As you know, this idea is cheerfully embodied in FF, Opera, Google Chrome, but IE intelligently sent my idea to its trash bin - when scrolling, the moved layer crawled along with the page.

    I must say that options with layout, 100% high, etc., described in detail on the network did not suit me, because it required versatility so that the layer could be used with any designs.

    As a result, the choice fell on expression, which in this situation was quite logical. Having read all the possible docks for this implementation, I came to several key conclusions:

    1. Before the announcementany empty HTML comment is put, the validator does not complain about it, and the explorer stops accepting this doctype ad. This will save you a lot of problems.

    2. The following CSS construction in the fixed layer is used:
    position:fixed; _position:absolute; top:0; _top:expression( eval(document.body.scrollTop) + 'px' );

    3. Filters allow you to get rid of twitching of the fixed layer in IE:
    if (document.body.filters) true;
    I noticed it completely by accident.

    And now the most important thing. The design is quite standard for itself, it works until the layer is transferred by the mouse, after the transfer - the ability to fix disappears. Maybe it was already done by someone or described somewhere, in that case I was just looking badly, but I had to dig out myself, that's how it turned out ...

    Instead of being equal to the top of the scrolling, in which the layer always remains at the same absolute position, I began to palm off on the value of the indent from the cookie in which it was saved when dragging:

    _top:expression( Math.round(my_class_cookies.get('POSY')) + Math.round(offsetParent.scrollTop) + 'px' );

    my_class_cookies.get('POSY')- a JavaScript class method that simply takes the value from the cookies. After all the manipulations, the code looked something like this:

    Position fixed in IE6

    The layer remains fixed even after drag and drop. View working demo

    Also popular now: