粘滯側導航

Question

看來我的側欄導航不希望正常工作，我希望它留在一邊作爲一個棍子導航，但它似乎不想移動。任何幫助或東西指向我在正確的方向表示讚賞。

HTML

<nav class="nav"> 
    <ul class="menu-nav" id="menu"> 
    <li data-menuanchor="firstPage" class="menu_item-home active"><a href="#home"><span class="navtext">Environment</span></a></li> 
    <li data-menuanchor="secondPage" class="menu_item-about"><a href="#about"><span class="navtext">Econimic</span></a></li> 
    <li data-menuanchor="3rdPage" class="menu_item-team"><a href="#team"><span class="navtext">LEED Certification</span></a></li> 
    <li data-menuanchor="4thPage" class="menu_item-process"><a href="#process"><span class="navtext">NAHB</span></a></li> 
    <li data-menuanchor="5thPage" class="menu_item-progress"><a href="#progress"><span class="navtext">FAQs</span></a></li> 
    </ul> 
</nav> 

CSS

/*nav 
*/ 
.nav { 
    position:fixed; 
    top: 268px; 
    left: 0; 
    height: 800px; 
    z-index: 1; 
    width: 75px; 
    padding: 0; 
    margin:0; 
    /* text-align: center; */ 
/* background-color: rgba(0,0,0,.25); 
*/ list-style: none; 
} 
.menu-nav { 
    list-style: none; 
     margin: 0 0 10px 0px !important; 
} 
.menu-nav li, 
.menu-nav li a { 
    display:block; 
} 
.menu-nav li { 
    margin: 0; 
    position: relative; 
    z-index: 1; 
} 
.menu-nav li a { 
    text-decoration:none; 
    position: relative; 
    z-index: 2; 
    /* color: #ff4d00; */ 
    color: transparent; 
    /* background-image: url(../img/bg/icons-sprite_551x75.png); */ 
    background-image: url(https://lh5.googleusercontent.com/-TbabxOjBKLI/UzoN5XcpN1I/AAAAAAAAA48/YCGyUXwLj5Y/s800/icons-sprite_551x75.png); 
    background-repeat: no-repeat; 
    width: 75px; 
    height: 68px; 
    transition: all 1s; 
} 
.menu-nav li a, 
.menu-nav li.active a { 
    padding: 9px 2px; 
    display:block; 
} 
.menu-nav li.active a { 
    color: #fff; 
    background-color: rgba(0,0,0,.5); 
} 
.menu-nav li a:hover { 
    /* background-color: rgba(0,0,0,.5); */ 
    background-color: rgba(255,255,255,.95); 
} 
/* visually hide the navigation text */ 
.navtext { 
    height: 68px; 
    width: 200px; 
    margin: 0; 
    overflow: hidden; 
    padding: 1em .5em 1em 6em; 
    overflow: hidden; 
    position: absolute; 
    top:0;right:0;bottom:0;left:0; 
    display: inline-block; 
    transform: translateX(-200px); 
    /* transition: transform .4s; */ 
    transition: all .4s; 
    z-index:-1; 
} 
/* reveal the navigation text on hover */ 
.menu-nav li a:hover .navtext { 
    overflow: visible; 
    transform: translateX(0); 
    color: #fff; 
    /* background-color: rgba(0,0,0,.5); */ 
    background: linear-gradient(to right, transparent, transparent 75px, rgba(0,0,0,.5) 75px, rgba(0,0,0,.5)); 
} 
.menu-nav li a:hover, 
.menu-nav li.active a:hover, 
.menu-nav li a:hover .navtext { 
    /* color: #ffdbcc; */ 
    /* background-color: rgba(0,0,0,.5); */ 
} 
.menu_item-home a { background-position: 0 0; } 
.menu_item-about a { background-position: 0 -69px; } 
.menu_item-team a { background-position: 0 -138px; } 
.menu_item-process a { background-position: 0 -207px; } 
.menu_item-progress a { background-position: 0 -276px; } 
.menu_item-extras a { background-position: 0 -345px; } 
.menu_item-sponsorus a { background-position: 0 -414px; } 
.menu_item-sponsors a { background-position: 0 -483px; } 

/*nav*/ 

Answer 1

它去到頂部，如果你想要的。看這個小提琴：https://jsfiddle.net/sde6rcsu/

我改變了你的導航類，不具有頂級屬性。

.nav { 
    position:fixed; 
/* top: 268px; */ 
    left: 0; 
    height: 800px; 
    z-index: 1; 
    width: 75px; 
    padding: 0; 
    margin:0; 
    /* text-align: center; */ 
/* background-color: rgba(0,0,0,.25); 
*/ list-style: none; 
}