2

感谢您的帮助，请原谅我是菜鸟。答案可能非常简单；

我正在尝试为我的个人网站“EthanGreenspan.com”使用一个名为“ ScrollNav.js ”的 JQuery 插件。

我想使用这个插件制作一个简单的左窗格，其中包含一个交互式目录，允许用户单击部分以滚动到它们。正如您在 JSFiddle（底部链接）中所见，左侧窗格中的 ScrollNav 站点的功能不同。

这是我希望用作目录的 HTML。

<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>

这是 Jquery（我把它放在 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的链接。

谢谢，麻烦您了！

4

2 回答 2

4

我是Jimmy，scrollNav.js jQuery 插件的作者。您遇到的问题是由于您自己创建了导航项。使用scrollNav，您不需要这样做。该插件会扫描您的内容并自行创建导航项目。

我分叉了你的小提琴并将标记重新设计为 scrollNav 在这里寻找的内容。我上周刚刚发布了该插件的 v2，因此您需要确保在使用我的示例代码之前更新您自己的源代码。最新版本允许您选择插入点以及每个部分的包装元素，您会看到我已经为您定义了这些。

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

请务必阅读更改日志以查看新版本中的其他更改。

于 2013-10-15T00:17:40.777 回答
0

你需要确保你的锚正确关闭。并且您已经在页面中包含了 jQuery，然后是 Scroll 脚本。

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 函数包装您的 jQuery 插件调用，以便它仅在 DOM 加载后加载。

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

</script>
于 2013-08-09T18:58:49.040 回答