Плавающая навигационная панель, которая фиксируется в верхней части страницы

Я пытаюсь имитировать то, что видел несколько раз. Обычно есть баннер с панелью навигации внизу, и когда страница прокручивается, она перемещается, пока не коснется верхней части, затем останавливается и остается зафиксированной. Я не совсем уверен, как это сделать. Я видел несколько разных вещей, которые просто не работают.

Посмотрев вокруг, я понял, что это сработает примерно так, но я могу заставить его работать. Я думаю, что мне чего-то не хватает

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

Ответы на вопрос(1)

Ваш ответ на вопрос