장소에 따라 내비게이션 텍스트 변경

Question

내 작은 문제를 해결하는 방법에 도움이 필요합니다.

사이트의 내 위치에 따라 내 탐색 텍스트를 변경하고 싶습니다. http://jsfiddle.net/iBertel/ah2zj/6/

내가이 켜져 위치 무엇을 변경하려면 고정 탐색 텍스트가 필요합니다 : 여기 (position1, 위치 2 등)

는 바이올린입니다.

편집 : 나는 바이올린을 편집 했으므로 더 이해할 수 있습니다.

HTML

없음 아직

<div class="page-wrap"> 
    <div class="fixed-nav"> 
     <span>Position 1</span> 
    </div> 

    <div id="position1" class="link"> 
     page 1 
    </div> 
    <div id="position2" class="link"> 
     page 2 
    </div> 
    <div id="position3" class="link"> 
     page 3 
    </div> 
    <div id="position4" class="link"> 
     page 4 
    </div> 
</div> 

CSS

html, body { 
    width:100%; 
    height:100%; 
} 
.page-wrap { 
    width:100%; 
    height:100%; 
    position:relative; 
} 
.fixed-nav { 
    position:fixed; 
    top:50px; 
    left:50px; 
    width:100px; 
    height:50px; 
    background-color:#CCC; 
} 

.link { 
    width:100%; 
    height:100%; 
    border-top:1px solid #F20; 
} 

JQUERY -이 작업을 시작하는 방법을 정말 확실하지 메신저.

누군가 나를 도울 수 있거나 나를 인도 할 수 있기를 바랍니다. 나는 이것에 대한 답을 찾을 수있었습니다.

응원 해 주셔서 감사합니다.

Answer 1

사용자가 페이지를 스크롤 한 위치에 따라 고정 된 탐색의 콘텐츠를 변경하려는 것처럼 들릴까요?

그렇다면, 당신은이

$(document).ready(function(){ 
    $(document).scroll(function() {   
    if ($('body').scrollTop() > 600) { 
     $('.fixed-nav span').text('Page 3+'); 
    } else if ($('body').scrollTop() > 200) { 
     $('.fixed-nav span').text('Around page 2'); 
    } else { 
     $('.fixed-nav span').text('Looking at page 1, ish.'); 
    }   
    }); 
}); 

같은 뭔가를 할 수

http://jsfiddle.net/ah2zj/4/

편집 :

각 '페이지'의 높이가 될 것입니다 무엇인지 모른다면 , 대신 이런 식으로 할 수 있습니다.

$(document).ready(function() { 
    $(document).scroll(function() { 
    $.each($('.link'), function (index, value) { 
     var position = $(this).position(); 
     var top = position.top; 
     var bottom = position.top + $(this).height(); 

     if ($('body').scrollTop() >= top && $('body').scrollTop() <= bottom) { 
     $('.fixed-nav span').text($(this).attr('id')); 
     return false; 
     } 
    }); 
    }); 
}); 

http://jsfiddle.net/ah2zj/7/

그래서 사용자가 페이지를 스크롤 할 때마다 페이지 요소마다 반복되어 페이지의 위치가 결정됩니다. 페이지에서의 위치가 스크롤 범위 내에있는 경우 해당 요소의 ID로 탐색을 업데이트합니다.

편집 :

하는 파이어 폭스 바보의 경우에는, 당신은 내가 무슨 말인지 이해 바라며, 이미 나는 생각

var scrollTop = $(document).scrollTop(); 

http://jsfiddle.net/ah2zj/8/

Answer 2

을 수행해야합니다 비슷한 질문에 답변했습니다.

이럴 필요가 없습니다.첨부 된 바이올린을 보았습니다. How to implement nav bar using jQuery