Scrollnav.js 사이드 바가 활성화되지 않음

Question

도움을 주셔서 감사 드리며 멍청한 놈 이신 것을 용서해주십시오. 대답은 매우 간단합니다.

개인 사이트 "EthanGreenspan.com"에 "ScrollNav.js"이라는 JQuery 플러그인을 사용하려고합니다.

사용자가 섹션을 클릭하여 스크롤 할 수있는 대화식 목차가있는 간단한 왼쪽 창을 만들기 위해이 플러그인을 사용하고 싶습니다. JSFiddle (아래쪽 링크)에서 볼 수 있듯이 왼쪽 창의 ScrollNav 사이트처럼 작동하지 않습니다.

이것은 목차로 사용하려는 HTML입니다.

이 JQuery와입니다

<div class="leftpane" class="main" role="main"> 
<nav class="scroll-nav" role="navigation"> 
<span class="scroll-nav-heading">Sections</span> 
<ol class="scroll-nav-list"> 
<li class="scroll-nav-item active top"> 
<a href="#jumpNav-0" class="scroll-nav-link">Top</a></li> 
<li class="scroll-nav-item active Current Work"> 
<a href="#jumpNav-1" class="scroll-nav-link"></a>Current Work</li> 
<li>Photography</li> 
<li>Consulting</li> 
<li>Blog</li> 
<li>Contact Me</li> 
</ol> 

(나는 인라인 JSFiddle에 대한 넣어)

<script> 
$('.body').scrollNav({ 
    sections: 'h3', 
    titletext: 'Scroll To', 
    fixedmargin: 40, 
    animation: true, 
}) 

</script> 

마지막으로

, 여기있는 ScrollNav JQuery와 플러그인;

(function(e){e.fn.scrollNav=function(t){e("body").addClass("sn-loading");var n={sections:"h3",titleText:"Scroll To",fixedMargin:40,animated:!0,speed:500,showHeadline:!0,showTopLink:!0,location:"insertBefore"};e.extend(n,t);var r=[],i=this,s=i.find(n.sections),o=e("<nav />",{"class":"scroll-nav",role:"navigation"}),u=function(){if(n.showTopLink===!1)return;var e=i.attr("id"),t=i.offset().top;if(e)r.push({id:e,offset:t,text:"Top"});else{i.attr("id","jumpNav-0");r.push({id:"jumpNav-0",offset:t,text:"Top"})}},a=function(){s.each(function(t){var n="jumpNav-"+(t+1),i=e(this).offset().top,s=e(this).text();e(this).attr("id",n);r.push({id:n,offset:i,text:s})})},f=function(){var t=e("<span />",{"class":"scroll-nav-heading",text:n.titleText}),i=e("<ol />",{"class":"scroll-nav-list"});e.each(r,function(t){var n=t===0?e("<li />",{"class":"scroll-nav-item active"}):e("<li />",{"class":"scroll-nav-item"}),r=e("<a />",{href:"#"+this.id,"class":"scroll-nav-link",text:this.text});i.append(n.append(r))});n.showHeadline===!0?o.append(t).append(i):o.append(i)},l=function(){var t=o.offset().top;e(window).resize(function(){e.each(r,function(){this.offset=e("#"+this.id).offset().top})});e(window).scroll(function(){var i=e(window).scrollTop(),s=e(window).height()*.5;i>t-n.fixedMargin?o.addClass("fixed"):o.removeClass("fixed");e.each(r,function(){if(this.offset>i-n.fixedMargin&&this.offset<i+s){o.find("li").removeClass("active");o.find('a[href="#'+this.id+'"]').parents("li").addClass("active")}})})};if(i.length!==0){u();a();f()}i.length!==0&&s.length!==0?o[n.location](i):i.length===0?console.log("Build failed, scrollNav could not find '"+i.selector+"'"):s.length===0&&console.log("Build failed, scrollNav could not find any '"+n.sections+"'s inside of '"+i.selector+"'");l();n.animated===!0&&e(".scroll-nav-link").click(function(){var t=e(this).attr("href"),r=e(t).offset().top;e("html:not(:animated),body:not(:animated)").animate({scrollTop:r-40},n.speed);return!1});e("body").removeClass("sn-loading").addClass("sn-active")}})(jQuery); 

저는 JQuery의 기초를 알고 있지만 실제로 도움이 될 수 있습니다!

내 HTML/CSS/JS와 함께 JSFiddle에 대한 링크입니다.

감사합니다.

Answer 1

저는 scrollNav.js jQuery 플러그인 작성자 Jimmy입니다. 문제는 직접 네비게이션 아이템을 생성했기 때문입니다. scrollNav를 사용하면이 작업을 수행 할 필요가 없습니다. 플러그인은 콘텐츠를 검색하고 자체적으로 탐색 항목을 만듭니다.

나는 당신의 피들을 갈래서 어떤 scrollNav가 찾고있는 마크 업을 here으로 수정했습니다. 지난 주에 플러그인 v2를 발표 했으므로 예제 코드를 사용하기 전에 자신의 소스를 업데이트해야합니다. 최신 버전을 사용하면 각 섹션의 줄 바꿈 요소뿐만 아니라 삽입 지점을 선택할 수 있으며이를 사용하면 해당 요소를 정의했습니다.

$('.post-article').scrollNav({ 
    sections: 'h3', 
    sectionElem: 'div', 
    insertTarget: '.leftpane', 
    insertLocation: 'appendTo' 
}); 

새로운 릴리스에서 변경된 사항을 확인하려면 change log을 읽어보십시오.

Answer 2

앵커가 제대로 닫혀 있는지 확인해야합니다. 그리고 jQuery와 스크롤 스크립트를 페이지에 포함 시켰습니다. 스크립트의

http://jsfiddle.net/DP7sf/5/

주문는

<script src="/linktojQuery.js"></script> 
<script src="/linktoScrollNav.js"></script> 

<script> 
// Document.ready function here 
</script> 

올바른 링크 형식은

<li><a href="#jumpNav-0" class="scroll-nav-link">Top</a></li> 
<li class="scroll-nav-item active Current Work"><a href="#jumpNav-1" class="scroll-nav-link">Current Work</a></li> 
<li><a href="#jumpNav-2" class="scroll-nav-link">Photography</a></li> 

는 document.ready function와 jQuery 플러그인 호출 그래서 그것은 단지 DOM 후로드로드되고해서 랩 .

<script> 
$(document).ready(function() { 
    $('.body').scrollNav({ 
    sections: 'h3', 
    titletext: 'Scroll To', 
    fixedmargin: 40, 
    animation: true 
    }); 
}); 

</script>