如何在导航栏和访问内容的内容之间保留空间 # 链接

Question

使用 UIkit 3.0，当您有粘性导航栏并访问 server.html#something 链接时，您将获得导航栏下的内容。您可以在官方页面中看到此行为：访问https://getuikit.com/docs/introduction#uikit-autocomplete-for-your-editor，导航栏涵盖的“编辑器的UIkit自动完成”部分。

这种行为在 bootstrap 4 中不会发生，例如：访问http://getbootstrap.com/docs/4.1/components/collapse/#accordion-example 是否不涵盖“Accordion 示例”部分

如何在 UIkit 中模拟 bottstrap 行为

Answer 1

他们使用 before 伪类的技巧。您指定高度和负上边距，因此它不会占用任何视觉空间并且内容看起来相同，但是当使用特定锚加载页面时，它会滚动到具有正确顶部填充的正确位置。 height 和 margin-top 应该大于或等于你的页眉高度

要仅针对您链接到的标题，请使用[id]（针对所有<hX id="something"></hX>），但如果您希望仅在相同的子页面上使用此行为，则最好在这些标题前面加上您的内容类别。

h1[id]::before,
h2[id]::before,
h3[id]::before,
h4[id]::before {
    display: block;
    height: 80px;
    margin-top: -80px;
    visibility: hidden;
    content: "";
}

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>


<nav class="uk-navbar-container" uk-navbar uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li><a href="#h1-heading">H1</a></li>
            <li><a href="#h2-heading">H2</a></li>
            <li><a href="#h3-heading">H3</a></li>
        </ul>

    </div>
</nav>

<article class="uk-article">

    <h1 id="h1-heading"><a class="uk-link-reset" href="#h1-heading">H1 Heading</a></h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h2 id="h2-heading"><a class="uk-link-reset" href="#h2-heading">H2 Heading</a></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h3 id="h3-heading"><a class="uk-link-reset" href="#h3-heading">H3 Heading</a></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <h4>Some additional text for h3 example, no anchor tag here</h4>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>