Sticky Element Modifier

Make the next element of StoryViewer sticky with a specific background color on bestdori.com/tool/storyviewer/

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Sticky Element Modifier
// @namespace    https://bestdori.com/
// @version      0.1
// @description  Make the next element of StoryViewer sticky with a specific background color on bestdori.com/tool/storyviewer/
// @match        https://bestdori.com/tool/storyviewer/*
// @grant        none
// @license      WTFPL
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个观察器实例
    const observer = new MutationObserver(function(mutations) {
        // 遍历所有的变化
        for (let mutation of mutations) {
            // 检查是否有新的节点被添加
            if (mutation.addedNodes) {
                // 遍历所有的新增节点
                for (let node of mutation.addedNodes) {
                    // 检查是否是我们关心的节点
                    if (node.id === 'StoryViewer') {
                        // 获取StoryViewer元素的下一个兄弟元素
                        const nextElement = node.nextElementSibling;

                        // 将下一个元素修改为吸顶,并设置背景颜色
                        nextElement.style.position = 'sticky';
                        nextElement.style.top = '52px';
                        nextElement.style.backgroundColor = 'var(--color-background)';
                        nextElement.style.zIndex = '9999';

                        // 结束循环
                        return;
                    }
                }
            }
        }
    });

    // 配置观察器:观察目标节点的子节点或后代节点的变化
    const config = { childList: true, subtree: true };

    // 开始观察document
    observer.observe(document, config);
})();