melxy / 图灵社区文章目录浮层

// ==UserScript==
// @name         图灵社区文章目录浮层
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       melxy
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @match        https://www.ituring.com.cn/book/tupubarticle/*
// @icon         https://www.google.com/s2/favicons?domain=ituring.com.cn
// @grant        none
// @copyright 2021, melxy (https://openuserjs.org/users/melxy)
// @license MIT
// ==/UserScript==

(function() {
    'use strict';
$(".article-view").ready();
    setTimeout(() => {
       $("head").append(`<style>
@media screen and (min-width: 992px) {
  .title-container {
    padding: 10px;
    border: 1px solid #dae1e7;
    background: rgba(236, 243, 252, 0.5);
    color: #152844;
    position: fixed;
    left: 0px;
    top: 220px;
    z-index: 99;
    text-shadow: 1px 1px 0px rgb(236, 243, 252, 0.5);
  }
}
.title-container span {
  cursor: pointer;
}
@media screen and (max-width: 992px) {
  .title-container {
    padding: 10px;
    border: 1px solid #dae1e7;
    background: rgba(236, 243, 252, 0.7);
    color: #152844;
    position: fixed;
    right: 0px;
    bottom: 10px;
    z-index: 99;
    text-shadow: 1px 1px 0px rgb(236, 243, 252, 0.7);
  }
}
          </style>`);


        $(".search-entry").css({"width":"fit-content"});
        $(".main-bar-view").css({"background":"rgba(255,255,255,0.5)"});
        $(".tool-bar").css({"background":"none"});
        $(".tool-bar .nav-title").remove();


        const container = $(`<div class="title-container"></div>`);
        $("body").append(container);
        const jnodes = $("h1,h2,h3")
        let count = 0;
        const len = jnodes.length / 2;
        jnodes.each(function () {
          const text = $(this).text();
          const top = $(this).offset().top - 77; // 防止上方搜索栏遮挡
          const tagName = "h" + (Number($(this)[0].tagName[1]) + 2);
          const node = `<span><${tagName}>${text}</${tagName}></span>`;
          const jnode = $(node);
          jnode.click({ to: top }, function (e) {
            $("html,body").animate({ scrollTop: e.data.to }, 300);
          });
          count ++;
          if (count<=len){
            container.append(jnode);
          }
        });


      }, 3000);
    // Your code here...
})();