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

Question

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

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

如何在 UIkit 中模拟 bottstrap 行为

Answer 1

他们使用 before pseudo-class 的技巧。您分配了一个高度和负的上边距，因此它不会保持任何视觉效果 space 并且内容看起来相同，但是当页面加载特定锚点时，它会滚动到具有正确顶部填充的正确位置. height 和 margin-top 应该大于或等于你的 header

的高度

要仅定位您链接到的标题，请使用 [id]（定位所有 <hX id="something"></hX>），但最好在这些标题前加上您内容的 class如果您只想在相同的子页面上执行此操作。

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>

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

How to preserve space between navbar and content accessing # links

html

css

getuikit