Barra de navegación flotante que se detiene fija en la parte superior de la página

Question

Feb 19, 2012, 05:01 AM

Barra de navegación flotante que se detiene fija en la parte superior de la página

Estoy tratando de imitar algo que he visto algunas veces diferentes. Por lo general, hay un banner con una barra de navegación debajo y cuando se desplaza la página se mueve hasta que toca la parte superior, luego se detiene y permanece fija. No estoy completamente seguro de cómo lograr esto. He visto algunas cosas diferentes que simplemente no funcionan.

Después de mirar alrededor, descubrí que funcionaría de esta manera, pero parece que puedo hacer que funcione. Creo que me faltan algunas cosas

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