使切换绝对按钮变粘 [英] Make a toggle absolute button become sticky

问题描述

我在下面的代码中制作粘滞按钮时遇到问题.

I'm having problem making a sticky button in the code below.

https://codepen.io/nht910/pen/KKKKerQ

摘要:

<div class="post-body d-flex justify-content-center">
    <!-- content -->
    <div class="post-content">
        <p>
            ...
        </p>    
    </div>

    <!-- button toggle -->
    <button type="button" class="btn btn-outline-primary" id="toc-button">
        button
    </button>

    <!-- table of contents -->
    <div class="post-toc">
        <nav class="sticky-top" id="toc"></nav>
    </div>

</div>

此代码中的按钮具有属性"position:absolute;".我试图将此属性更改为"position:sticky"，但它破坏了布局，使内容不再居中.

The button in this code has property "position: absolute;". I tried to change this property to "position: sticky" but it breaks the layout, it makes content that is not centered anymore.

默认情况下，在页面加载时，目录已经扩展.

And by default, on page load, the table of contents is expanded already.

你们能帮助我使该按钮在目录div之类的父div".post-body"内部变粘并保持在目录上方吗?并且请帮助我使目录在页面加载时也关闭.

Can you guys please help me to make that button become sticky inside the parent div ".post-body" like the table of contents and stay above the table of contents? And please help me to make the table of contents is closed on page load, too.

非常感谢你们.

推荐答案

将按钮放在目录和position: sticky之后.

Place the button after the table of contents and position: sticky.

示例: https://codepen.io/diogoperes/pen/KKKKbQd

这篇关于使切换绝对按钮变粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！