Question

实时网页：http://wlvrtn.com/sites/nms/page.php

我添加了一些jQuery（感谢StackOverflow的帮助）来自动化我的章节链接的目的地，这样第三章链接将指向页面上的第三章（文章）。

正如您从实际页面中看到的那样，我的粘性导航栏妨碍了每一章的开头。 我想将每个jquery锚点垂直偏移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内的“stub”元素偏移几个像素。

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

将 margin-left：200px 或 padding-left：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;
}

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

3 个答案: