2014-01-15 3 views
2

페이지 상단에 도달 한 후에 만 ​​고정 된 탐색 모음을 만들려고합니다. 탐색 코드가 고정되도록 코드가 작동하지만 위쪽으로 먼저 스크롤 할 수는 없습니다. , 이들은이 사이트에 비슷한 질문에 대한 답변 기반으로 한스크롤 한 후 고정 탐색 모음

$(document).ready(function() { 
$(window).scroll(function() { 
    //console log determines when nav is fixed 
    console.log($(window).scrollTop()) 
    if ($(window).scrollTop() > 600) { 
     $('#nav').addClass('fixed'); 
    } 
    if ($(window).scrollTop() < 601) { 
     $('#nav').removeClass('fixed'); 
    } 
}); 

:

<div id= "home"> contentcontentcontent </div> 
<div id="nav"> 
    <a href="#home">home</a> 
    <a href="#gogreen">go green</a> 
    <a href="#yourarea">your area</a> 
    <a href="#howto">how to</a></div> 

그리고 CSS :

nav { 
text-align: center; 
top: 600; 
z-index: 100; 
position: fixed; 
width: 100%; 
border: 0; 
margin-bottom: 0;} 

fixed { 
top:600; 
z-index: 100; 
position: fixed; 
width: 100%;} 

home { 
overflow: hidden;} 

그리고 jQuery를

다음은 HTML의 지금까지 아무 것도 작동하지 않는 것 같았다. 누구든지 내 코드에 무슨 문제가 있는지 알고 있습니까?

+0

안녕하세요, stackoverflow! 질문에 대한 도움을 얻으려면 일반적으로 '스크롤'과 같은 태그 (또는 종종 대신)와 함께 언어, 프레임 워크 및 컨텍스트에 대한 태그를 포함해야합니다. 이는 사용자가 'javascript'와 같은 태그를 구독 할 확률이 높기 때문에 사용자가 답을 얻을 확률이 높아집니다. – Ziggy

답변

0

CSS 선택기를 작성할 때 ids 및 클래스는 각각 # 또는 . 접두사가 필요합니다. 당신이

#nav { // rules } 

.fixed { // rules } 

#home { // rules } 

을해야 할 때 당신의 CSS에서 당신은 여기 your code 작업의 바이올린입니다

nav { // rules } 

fixed { // rules } 

home { // rules } 

있습니다.

관련 문제