Sticky Element Modifier

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

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

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

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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);
})();