jQuery 경유지를 사용하여 단일 페이지 웹 사이트에 대한 탐색을 업데이트하려고합니다.단일 페이지 탐색 메뉴 - 활성 표시
보기의 현재 섹션을 기반으로 탐색을 업데이트하고 싶습니다. 탐색 링크를 사용하여 내려갈 때 잘 작동합니다. 내 문제는 현재 앵커가 있어야하는 위치 아래에있는보기에서 현재 섹션 위에있는 섹션으로 스크롤하려고 할 때입니다.
내 Demo을 참조하십시오.
jQuery를
$(document).ready(function(){
$('section').waypoint(function(direction) {
thisId = $(this).attr('id');
$('ul li').each(function(){
var secondaryID = $(this).attr('class');
if (secondaryID == thisId)
{
$('ul li').removeClass('active');
$(this).addClass('active');
}
});
},{offset: '0'});
});
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
HTML
<ul>
<li class="test"><a href="#test"></a></li>
<li class="test2"><a href="#test2"></a></li>
<li class="test3"><a href="#test3"></a></li>
<li class="test4"><a href="#test4"></a></li>
<li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>
업데이트
내가 다른 오프셋 (offset)와 함께 두 개의 웨이 포인트 기능을 사용하여 작업이있어 그러나 이것은 분명히 최선의 해결책이 아닙니다.
http://jsfiddle.net/SJkmh/10/ I는 (방향)에 따라 동일한 기능 내에서 오프셋을 지정하는 방법을 찾으려, I (1 & -1) 값과 오프셋 변수를 사용하지만, 불행히도 만 사용
+1.
감사합니다, 나는 여기에 뭔가가 있다고 생각하지만, 이런 식으로 작동하지 않습니다. 문제는 탐색 버튼을 사용하여 웨이 포인트가 실행되지 않는다는 것입니다. 예를 들어 오프셋을 '-1'로 변경하면 '위로'방향으로 작동합니다. 그러나 그때 그것은 내려 가기 위해 작동하지 않을 것입니다. – hyperdrive
두 웨이 포인트 호출을 사용하여 작동하도록했습니다.하지만 이것이 최상의 솔루션이라고 생각하지 않습니다. – hyperdrive
업데이트 된 답변을보고, 그것이 당신을 도울 것입니다 희망 – Dart