Barra di navigazione mobile che si ferma fissa nella parte superiore della pagina

StackOverflow https://stackoverflow.com/questions/9346557

  •  27-10-2019
  •  | 
  •  

Domanda

Sto cercando di imitare qualcosa che ho visto diverse volte.Di solito c'è un banner con una barra di navigazione in basso e quando si scorre la pagina si sposta fino a toccare la parte superiore, quindi si ferma e rimane fissa.Non sono completamente sicuro di come ottenere questo risultato.Ho visto alcune cose diverse che semplicemente non funzionano.

Dopo essermi guardato intorno ho capito che funzionerà in questo modo, ma sembra che riesca a farlo funzionare.Penso che mi manchino alcune cose

<!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>
È stato utile?

Soluzione

Tutti i riferimenti a qualcosa di inesistente navTopPos la variabile dovrebbe essere modificata per fare riferimento a topPos variabile.Il tuo codice JS ora dovrebbe essere:

var topPos;
var updatedPos;
window.onscroll = navPos;
if (!topPos) {
    topPos = 120;
}
function navPos() {
    var pos = window.scrollY;
    if (!topPos) {//this line was changed
        topPos = 120;//this line was changed
    }
    var st = document.getElementById('navTest');

    if (st) {
        if (pos < topPos && updatedPos != 'absolute') {
            st.style.position = 'absolute';
            st.style.top = topPos + 'px';//this line was changed
            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();

L'interprete è morto da qualche parte qui:

if (!topNavPos) {
    topNavPos = 120;
}

​ JSFiddle aggiornato con le modifiche necessarie.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top