• Техногрет
  • Фиксирование элемента в окне IE

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Владимир Токмаков

    4 апреля 2004


    Задача.

    Сделать так, чтобы конкретный элемент на странице находился в одном и том же месте окна IE, независимо от состояния полос прокрутки. Или, проще говоря, эмулировать CSS-правило position: fixed.

    Как это выглядит в браузере

    01 
    02 
    03 
    04 
    05 
    06 
    07 
    08 
    09 
    10 
    11 
    12 
    13 
    14 
    15 
    16 
    17 
    18 
    19 
    20 
    21 
    22 
    23 
    24 
    25 
    26 
    27 
    28 
    29 
    30 
    31 
    32 
    33 
    34 
    35 
    36 
    37 
    38 
    39 
    40 
    41 
    42 
    <!-- Copyright (c) Art. Lebedev Studio | http://www.artlebedev.ru/ -->
    
        <head>
            <style type="text/css">
                body
                {
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    color: WindowText;
                }
                #header
                {
                    width: 100%;
                    padding: 0.5em 0;
                    background-color: ButtonFace; 
                    color: ButtonText;
                    position: fixed;
                    top: 0;
                    left: 0;
                    //position: absolute;
                    top: expression(
                        document.getElementsByTagName( 'body' )[0].scrollTop + "px"
                    );
                }
    
                #content
                {
                    background: Window url('grid-10.gif'); 
                    padding: 2.2em 0;
                    width: 100%;
                    height: 3000px;
                }
            </style>
        </head>
        <body>
            <div id="header">Top Frame Content</div>
            <div id="content">
                <p>Middle Frame Content</p>
            </div>
        </body>
    </html>