arra de navegação flutuante que para fixa na parte superior da pági

Question

Feb 19, 2012, 05:01 AM

arra de navegação flutuante que para fixa na parte superior da pági

Estou tentando imitar algo que já vi algumas vezes. Geralmente, há um banner com uma barra de navegação abaixo e, quando a página é rolada, ela se move até tocar no topo, para e permanece fixa. Não tenho muita certeza de como fazer isso. Eu já vi algumas coisas diferentes que simplesmente não funciona

Depois de olhar ao redor, descobri que funcionará algo parecido com isto, mas consigo fazê-lo funcionar. Acho que estou perdendo algumas coisas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
    #Table_01 {
        position:relative;
        left:0px;
        top:0px;
        width:1020px;
        height:854px;
        text-align: left;
        margin-right: auto;
        margin-left: auto;
    }
    body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #a4c639;
        text-align: center;
        margin: 0px;
    }
-->
</style>
<script type='text/javascript'>
    var topPos = 120;
    var updatedPos;
    window.onscroll = navPos;
    if (!topPos) {
        topPos = 120;
    }
    function navPos() {
        var pos = window.scrollY;
        if (!topPos) {
            topPos = 120;
        }
        var st = document.getElementById('navTest');
        if (st) {
            if (pos < topPos && updatedPos != 'absolute') {
                st.style.position = 'absolute';
                st.style.top = topPos + 'px';
                updatedPos = 'absolute';
                //alert('Switched to absolute');
            } else if (pos >= topPos && updatedPos != 'fixed') {
                st.style.position = 'fixed';
                st.style.top = '0'; 
                updatedPos = 'fixed';
                //alert('Switched to fixed');
            }
        }
    }
    navPos();
</script>
</head>

<body>
    <div id="Table_01">
        <div id='navTest' style='position:absolute;z-index:999;top:120px;left:0; height:50px;width:100%; background-color:#000;' width='100%'>
        </div>
    </div>
</body>
</html>