Помощник липкого меню

Мне нужна помощь при создании липкого меню (прикрепляется к прокрутке).Помощник липкого меню

Мне нужно, чтобы оно было прикреплено, когда я прокручиваю вниз к концу страницы!

Я считаю, что мне нужна помощь со сценарием здесь.

Вот код:

<style> 
@import url('http://fonts.googleapis.com/css?family=Oswald'); 
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css); 

body { 
    text-decoration: none; 
    background: #696969; 
    width: 100%; 
    min-height: 100%; 
    padding: 0; 
    margin: 0; 
    -webkit-font-smoothing: antialiased; 
} 

header { 
    max-width: 100%; 
    height: 140px; 
    background-image: url(''); 
    text-align: center; 
    padding: 75px 0; 
} 
header h1 { 
    color: #ffffff; 
    font-size: 4.5em; 
    font-family: "Raleway", sans-serif; 
    font-weight: 100; 
} 
header h3 { 
    color: #fff; 
    font-size: 1.5em; 
    font-family: "Oswald", sans-serif; 
    text-transform: uppercase; 
    padding: 10px; 
} 

ul { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

nav ul { 
    text-decoration: none; 
    text-align: center; 
    overflow: hidden; 
    float: center; 
    width: 100%; 
    padding: 0; 
    margin: 0 0 0; 
    list-style: none; 
    background: #EBEEF5; 
    font-family: "Oswald", sans-serif; 
    -webkit-box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55); 
    -moz-box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55); 
    box-shadow: 1px 1px 1px 0px rgba(204, 204, 204, 0.55); 
} 
nav ul li { 
    float: left; 

} 
nav ul a { 
    display: block; 
    padding: 25px; 
    font-size: 20px; 
    text-transform: uppercase; 
    color: #8A8E99; 
    text-decoration: none; 
    -webkit-transition: 0.5s ease; 
    -moz-transition: 0.5s ease; 
    transition: 0.5s ease; 
} 
nav ul a:hover { 
    text-decoration: none; 
    background: #66B2FF; 
    color: #fff; 
} 
nav ul .current { 
    background: #66B2FF; 
    color: #fff; 
    display: block; 
    padding: 25px; 
    font-size: 20px; 
    float: right; 
    width: 100px; 
    text-align: center; 
} 
.content .post { 
    border-left: 5px solid #3D3D3D; 
    padding: 0 15px; 
    margin-bottom: 50px; 

body { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQANOiV2bGZHFQAL75pf5wgVhAiBFYEGYAFwlsgqYAgCqtRfGAd9q4QAAAABJRU5ErkJggg==) #bcc; 

a:link { 
color: #3D3D3D; 
background-color: ; 
text-decoration: no display; 
} 

.input-text .tl, .input-text .tr, .input-text .bl, .input-text .br, .input-textarea .tl, .input-textarea .tr, .input-textarea .bl, .input-textarea .br, .element_avatar.image .a_tl, .element_avatar.image .a_tr, .element_avatar.image .a_bl, .element_avatar.image .a_br{ 
    background:none; 
} 
.element_avatar img { 
    padding: 2px; 
    border: 1px grey solid; 
    border-radius: 100%; 
    transition: 300ms; 
} 
.element_avatar img:hover { 
    transform: rotate(90deg) scale(0.8); 
} 
</style> 


    <body> 
     <!-- Header --> 
     <header> 
     </header> 
     <!-- Navigation --> 
     <nav> 
      <ul> 
       <li><a href="/#" class="menu">Home</a></li> 
       <li><a href="/#" class="menu">Forum</a></li> 
       <li><a href="/#" class="menu">Store</a></li> 
         <li><a href="/#" class="menu">Vote</a></li> 
         <li><a href="/#" class="menu">Staff</a></li> 
       <li class="current"><span id="location">Minelands</span></li> 
      </ul> 
     </nav>

Вот живое меню:.

http://www.minelandsmc.enjin.com

С наилучшими пожеланиями, Jleeto

источник

2015-01-03 user3927559

Если вы хотите, чтобы он прикреплялся к верхней части страницы при прокрутке вниз, вам нужно использовать js, иначе вы могли бы использовать 'position: fixed;' – NatureShade

Пожалуйста, прочитайте http://stackoverflow.com/help/how-to- спросите –

Хорошо, поэтому мне нужна помощь с JS. – user3927559

попробовать это,

nav { 
     left: 0; 
     position: fixed; 
     top: 0; 
     width: 100%; 
     z-index: 111; 
    }

источник

2015-01-03 10:46:35 Sathish

У кого-нибудь есть идеи? – user3927559

Помощник липкого меню

ответ

Смежные вопросы