confluence文档添加右侧浮动导航

confluence文档添加右侧浮动导航

confluence默认toc目录是插入到文档的固定位置的，很不方便。
所以我们通过几行代码让它能够右侧浮动显示。

1.插入目录宏

2.插入html宏，在里面添加如下内容：

<!-- 创建一个浮动的右侧导航div -->
<div id='my_toc' style="border:1px solid black; 350px;height:600px; overflow:auto; position: fixed; bottom: 20px;right: 25px; z-index: 100; background:white;">
</div>

<div style="border:1px solid black; 70px;height:30px;  position: fixed; bottom: 20px;right: 25px; z-index: 110; text-align:center;line-height:30px; background-color:white;"
       onclick="toggle_toc()">
     隐藏/显示
</div>

<script>

  function move_toc_to_my_div(){
    var origin_toc_html = $('.toc-macro');
    console.log('xun: origin_toc:', origin_toc_html);
    // move to right-side navigator div
    $('#my_toc').append(origin_toc_html);
  };

  function toggle_toc(){
    if($("#my_toc").is(":hidden")){
       $("#my_toc").show();    //如果元素为隐藏,则将它显现
    }else{
      $("#my_toc").hide();     //如果元素为显现,则将其隐藏
    }
  }


  $(move_toc_to_my_div);
</script>

保存，ok。