亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使標題在粘性 div 上具有粘性(tocbot)

使標題在粘性 div 上具有粘性(tocbot)

撒科打諢 2022-10-13 14:31:37
我正在使用tocbot在我的網站上構建目錄部分,但是我在滾動時遇到問題,使我在其上方添加的標題堅持到目錄中。https://i.stack.imgur.com/vCm1K.gif 這是我到目前為止所得到的:<div id="desktop-toc" class="tiktoc">    <p class="toc-title">Content Navigation</p>    <aside class="toc-container js-sticky">        <div class="toc"></div>    </aside></div>CSS            /* Start Table of Contents styling */             .toc-container {                display: -webkit-box;                display: flex;                -webkit-box-align: right;                align-items: left;            }                            /* Extra small devices (phones, 600px and down) */            @media only screen and (max-width: 600px),            only screen and (min-width: 600px)            /* Medium devices (landscape tablets, 768px and up) */            @media(min-width: 768px) and (orientation:landscape),            only screen and (max-width: 768px)  {              .tiktoc {                display: none;              }              .toc-container {              display: none;                }            }            /* Extra large devices (large laptops and desktops, 1200px and up) */            @media only screen and (min-width: 1200px)            {                                .tiktoc {                position: absolute;                top: 175px;                left: 1150px;                bottom: 0;                width: 350px;                margin-bottom: 0;                }                                .toc {                    font-size: 16px;                    line-height: 1.6em;                    padding: 20px;                    min-width: 250px;                    max-width: 300px;                    background-color: #212121;                    color: #fff;                }我嘗試將標題放在帶有“js-sticky”類的 div 中,但它內聯格式化它們,而不是在 TOC 部分的頂部。
查看完整描述

2 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

想通了這一點,對于將來有類似問題的任何人。

使用 tocbot,類js-sticky正在設置top: 150px;和隱藏目錄下方的標題元素。我通過添加top: 110px;到我創建的標題類toc-title并將其設置為!important.


查看完整回答
反對 回復 2022-10-13
?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

看起來在里面添加標題aside應該可以解決問題:


<div id="desktop-toc" class="tiktoc">

    <aside class="toc-container js-sticky">

        <p class="toc-title">Content Navigation</p>

        <div class="toc"></div>

    </aside>

</div>


查看完整回答
反對 回復 2022-10-13
  • 2 回答
  • 0 關注
  • 191 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號