微件:Movetoc

<style> .container {

   display: flex;
   justify-content: center;
   flex-direction: column; /* Stack children vertically */
   align-items: center; /* Center children horizontally */
   width: 100%;
   max-width: 600px; /* Adjust width as needed */
   margin: 0 auto; /* Center container horizontally */
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 15px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

} .input-wrapper {

   display: flex; /* 使用 Flexbox 布局 */
   align-items: center; /* 垂直居中对齐 */
   justify-content: space-between; /* 水平间距自动分布 */

}

.input-wrapper p {

   margin: 0; /* 去除段落的默认边距 */

}

.input-wrapper input {

   width: calc(100% - 100px); /* 计算输入框的宽度，留出空间给段落文本 */
   padding: 8px; /* 输入框的内边距 */
   box-sizing: border-box; /* 包括内边距和边框在内的盒子模型 */
   border: 1px solid #ccc; /* 边框 */
   border-radius: 4px; /* 圆角 */
   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); /* 过渡效果 */
   height: 30px; /* 输入框高度 */
   line-height: 30px; /* 行高，使文本垂直居中 */

} </style> <script> var toc = document.getElementById("toc"); var wrapper = document.getElementById("mw-wrapper"); var tocout = document.createElement("div"); tocout.id = "tocout"; wrapper.appendChild(tocout); var toctitle = document.createElement("div"); toctitle.innerHTML = "list目录"; toctitle.id = "toctitle"; tocout.appendChild(toctitle); tocout.appendChild(toc); </script> <style> #toctitle{ display: block;

   width: 15px;

margin-top: 1em; border-radius: 4px; height: fit-content; padding: 5px;

   background: rgba(255,255,255,0.78);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   box-shadow: -2px 2px 5px rgb(0 0 0 / 10%);
   z-index: 1;

} #tocout{ position: fixed;

   top: 60px;
   right: -255px;

display: flex; transition: all 0.5s cubic-bezier(0.2, 0.7, 0.5, 1);

   height: fit-content;

max-height: 65%;

   z-index: 1145;

} #tocout:hover{

   right: 0;

} .toc{ display:block; width: 200px;

   min-width: unset;

max-height: 100%; overflow-y: overlay;

   overflow-x: hidden;
   background: rgba(255,255,255,0.78);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
   transition: box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.5, 1);
   box-shadow: none;

}

   #tocout:hover .toc{
   box-shadow: 0 15px 20px rgb(0 0 0 / 20%);

}

   .toc ul ul {
   margin: 0 0 0 0.75em;}

@media screen and (max-width: 850px){

   #tocout{

position: fixed;

   top: 60px;
   right: -200px;

display: flex; transition: 1s; height: 50%;

   z-index: 1145;

} } .toctitle{ display: none; } .tocnumber, .toctext{ display: inline; } </style>