css - 如果目录不在 ScrollView 中则显示 Div

Question

我有一个很长的 HTML5 帮助文档，顶部有一个目录。当页面滚动并且表格不再可见时，我想显示一个包含表格链接的 float div:

<div id="DivTableOfContentsLink">
    <a href="#TableOfContents">
        Table of Contents
    </a>
</div>

是否可以仅使用 CSS(不使用 JavaScript)来实现这一点？

Answer 1

我不相信有一种方法可以在没有 javascript 的情况下根据窗口位置来处理隐藏/显示元素，但你可以 try something like this .基本上只需将目录的标题兼作链接并为其指定一个位置:固定的，这样当用户滚动时它会保留在页面顶部。

CSS:

.toc-link {    
    position:fixed;
    top:0;
    width:100%;
    background-color:#fff;
}

html:

<a class="toc-link" href="#toc">table of contents</a>
<ul id="toc">
    <li>chapter 1</li>
    <li>chapter 2</li>
    <li>chapter 3</li>
    <li>chapter 4</li>
    <li>chapter 5</li>
    <li>chapter 6</li>
</ul>