2013-05-28 3 views
0

좋아, 나는 나 자신을 시차 스크롤 웹 사이트를 만들고 고정 메뉴 막대를 만들기 위하여 파악할 수 없다.웹 사이트를위한 조정 메뉴 막대

메뉴 막대를 웹 사이트 아래 2/3 섹션으로 표시하고 사용자가 해당 페이지를 스크롤 할 때 페이지의 나머지 부분을 아래로 스크롤 할 때 페이지 상단에 고정되기를 원합니다. 죄송합니다. 내 용어가 끔찍한 경우,이 웹 페이지의 기능과 똑같은 메뉴 표시 줄을 원한다면 도움이됩니다.

그래서 기본적으로 나는 CSS에서 이것을하는 방법을 모릅니다. 그래서 누군가가 위대한 것이 될 수 있다면 도움이 될 수 있습니다.

:

http://alwayscreative.net/

감사

+1

당신은 이미 뭔가를 봤나요? 실을 열기 전에? 너 스스로 뭐하려고 했니? – Lobato

답변

3

THIS 올바른 방향으로 넣을 수 있을까요? 또는 ANOTHER 하나

<div class="header"><strong>Header</strong></div> 
<div class="nav"><strong>Navigation Bar</strong></div> 
<div class="content"></div> 
<style> 
body{ 
    margin: 0; 
} 
.header{ 
    height: 50px; 
    background-color: #000; 
    font-size: 16px; 
    text-align: center; 
    color: #fff; 
    padding-top: 3%; 
} 
.nav{ 
    height: 30px; 
    background-color: #D7D7D7; 
    font-size: 16px; 
    text-align: center; 
    color: #000; 
    padding-top: 5px; 
    width: 100%; 
} 
.content{ 
    height: 1200px; 
} 
</style> 

JS :

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(window).scroll(function(){ 
     var scrollTop = 90; 
     if($(window).scrollTop() >= scrollTop){ 
      $('.nav').css({ 
       position : 'fixed', 
       top : '0' 
      }); 
     } 
     if($(window).scrollTop() < scrollTop){ 
      $('.nav').removeAttr('style'); 
     } 
    }) 
})</script>