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