jQuery的自动锚导航 - 添加像素偏移

Question

直播页面：http://wlvrtn.com/sites/nms/page.php

我添加了一些jQuery的（感谢来自StackOverflow的帮助）来自动的我的章链接的目标，使得第三章链接将直接向页面上的第三章（文章）。

正如您从活动页面中看到的，我的粘性导航栏妨碍了每章的开始。 我想垂直偏移每个jquery anchor 200px，以便每个章节的开头正确显示。

HTML - 章节导航：

<nav id="chapters"> 
    <ul> 
     <li><a href="#">Chapter One</a></li> 
     <li><a href="#">Chapter Two</a></li> 
     <li><a href="#">Chapter Three</a></li> 
    </ul> 
</nav> 

HTML - 文章：

<article class="clearfix"> 
    <h1>Chapter One</h1> 
    ... 
</article> 

的jQuery：

// Chapters - find the nav & headers 
var nav = $('#chapters li a'), 
    articles = $('#main article > h1'); 

// Chapters - now assign an id/href to each 
nav.each(function (i) { 
    nav.eq(i).attr('href', '#article-' + i); 
    articles[i].id = 'article-' + i; 
}); 

Answer 1

您可以通过重新排列元素做到这一点：

<h1>Chapter One<a id="article-0" style="position: relative; top: -200px;">&nbsp;</a></h1> 

在这里，你要链接到锚是不是里面的h1而是一个“存根”元素h1这是偏移了几个像素。

显然CSS类将是一个好一点：

.v-offset { 
    position: relative; 
    top: -200px; 
} 

... 

<h1>Chapter One<a id="article-0" class="v-offset">&nbsp;</a></h1> 

您可以使用jQuery的append()方法写的锚在动态

nav.each(function (i, ele) { 
    $(ele).attr('href', '#article-' + i); // $(ele) == $nav.eq(i) 
    $(articles[i]).append('<a id="article-' + i + '" class="v-offset">&nbsp;</a>'); 
}); 

Answer 2

添加任何保证金左：200像素或padding-左：200px添加到要缩进的项目。

Answer 3

如果你想简单列出文本变换，你可以做这样的事情还有：

HTML

<ul> 
    <li>test</li> 
    <li>test2</li> 
    <li>test3</li> 
</ul> 

CSS

ul{ 
     margin-left:200px; 
    } 

OR

HTML

<ul> 
    <li>test</li> 
    <li>test2</li> 
    <li>test3</li> 
</ul> 

CSS

li{ 
    text-indent:200px; 
    list-style-type: none; 
}