您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Move the table of contents in laravel docs to a sidebar!
当前为
// ==UserScript== // @name Laravel docs sidebar // @namespace http://tampermonkey.net/ // @version 1.1 // @description Move the table of contents in laravel docs to a sidebar! // @author unoqaz // @match https://laravel.com/docs/* // @icon https://www.google.com/s2/favicons?domain=laravel.com // @grant none // ==/UserScript== (function() { 'use strict'; const ele= document.createElement('style'); ele.type = 'text/css'; ele.innerHTML = ` @media only screen and (min-width: 1265px) { #main-content > ul { position: fixed; top: 33px; right: 15px; height: calc(100vh - 33px); overflow: auto; padding-right: 10px; width: 15vw; z-index: 999} ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; } ::-webkit-scrollbar-thumb:hover { background: #555; } } html { scroll-behavior: smooth; } `; document.head.appendChild(ele); // https://css-tricks.com/sticky-table-of-contents-with-scrolling-active-states/ const observer = new IntersectionObserver(entries => { entries.some((entry, index, entries) => { //using some so that itteration can be stopped in the case that this IntersectionObserver callback is called when document has just rendered const id = entry.target.getAttribute('id'); const sectionArray = [...document.querySelectorAll('h2[id],h3[id]')] const indexOfEntry = sectionArray.indexOf(entry.target) const highlightMenuItem = function (id){ const menuItem = document.querySelector(`#main-content li a[href="#${id}"]`) menuItem.style.setProperty('color', "rgba(255,124,117)", 'important') if(menuItem.getBoundingClientRect().bottom > document.defaultView.innerHeight || (menuItem.getBoundingClientRect().y < 35)){ var timer = null; const scrollMenuInView = function() { if(timer !== null) { clearTimeout(timer); } timer = setTimeout(function() { window.removeEventListener('scroll', scrollMenuInView) menuItem.scrollIntoView({behavior: "smooth", block: "center"}) }, 111); } window.addEventListener('scroll', scrollMenuInView); } } if (entry.isIntersecting){ if (entry.boundingClientRect.top >= entry.rootBounds.top){// entry moving upward [...document.querySelectorAll('#main-content>ul li a[style]:not([style=""])')].forEach(item => { item.style.removeProperty('color') }) } highlightMenuItem(id) } else { if (entry.boundingClientRect.bottom >= entry.rootBounds.bottom){ const idToHighlight = sectionArray[indexOfEntry - 1].id; [...document.querySelectorAll('#main-content>ul li a[style]:not([style=""])')].forEach(item => { item.style.removeProperty('color') }) highlightMenuItem(idToHighlight) } if (entries.length === sectionArray.length) return true; // document just rendered so quit itteration. } }); }, {rootMargin: "-144px 0px -55% 0px"}); document.querySelectorAll('h2[id],h3[id]').forEach((section) => { const id = section?.id if (id && document.querySelector(`#main-content li a[href="#${id}"]`)) { observer.observe(section); } }); })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址