微件:Movetoc

<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>