B站导航栏显示控制

Greasy Fork is available in English.
B站导航栏显示控制

让B站顶部导航栏可手动隐藏/显示，按钮位于右侧中间
当前为 2025-05-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         B站导航栏显示控制
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  让B站顶部导航栏可手动隐藏/显示，按钮位于右侧中间
// @author       你
// @match        https://www.bilibili.com/*
// @grant        none
// @license      MIT; https://opensource.org/licenses/MIT
// ==/UserScript==

(function() {
    'use strict';
    
    // 从本地存储获取导航栏状态
    const isHidden = localStorage.getItem('bilibiliHeaderHidden') === 'true';
    
    // 等待目标元素出现的工具函数
    function waitForElement(selector, callback) {
        const element = document.querySelector(selector);
        if (element) {
            callback(element);
            return;
        }
        
        const observer = new MutationObserver(mutations => {
            const element = document.querySelector(selector);
            if (element) {
                observer.disconnect();
                callback(element);
            }
        });
        
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
    
    // 创建控制按钮
    function createToggleButton() {
        const button = document.createElement('button');
        button.id = 'bilibili-header-toggle';
        button.textContent = '+';
        
        button.style.cssText = `
            position: fixed;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            z-index: 9999;
            background-color: transparent;
            color: #cccccc;
            border: 1px solid rgba(200, 200, 200, 0.5);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            padding: 0;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: none;
        `;
        
        button.addEventListener('mouseenter', () => {
            button.style.color = '#ffffff';
            button.style.transform = 'translateY(-50%) scale(1.1)';
            button.style.borderColor = 'rgba(255, 255, 255, 0.8)';
        });
        
        button.addEventListener('mouseleave', () => {
            button.style.color = '#cccccc';
            button.style.transform = 'translateY(-50%)';
            button.style.borderColor = 'rgba(200, 200, 200, 0.5)';
        });
        
        button.addEventListener('click', toggleHeader);
        document.body.appendChild(button);
    }
    
    // 切换导航栏显示状态 - 增强选择器兼容性
    function toggleHeader() {
        // 尝试多种可能的选择器组合，覆盖不同版本的B站页面
        const headerSelectors = [
            '.bili-header.fixed-header',          // 旧版PC端头部
            '.bili-main-header',                 // 新版PC端头部
            '.bili-header-m',                    // 移动端头部
            '.header-wrapper',                   // 可能的头部容器
            'header[class*="header"]',           // 包含"header"的class
            'div[class*="nav"]',                 // 包含"nav"的div
            '#bilibili-player .bpx-player-header' // 播放器头部
        ];
        
        let allHidden = true;
        
        headerSelectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(header => {
                if (header) {
                    console.log('Processing header:', header.className, header.tagName);
                    
                    // 添加动画效果
                    if (header.style.display === 'none') {
                        header.style.display = 'block';
                        header.style.opacity = '0';
                        header.style.transform = 'translateY(-100%)';
                        header.style.transition = 'all 0.3s ease-out';
                        
                        setTimeout(() => {
                            header.style.opacity = '1';
                            header.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        header.style.opacity = '0';
                        header.style.transform = 'translateY(-100%)';
                        header.style.transition = 'all 0.3s ease-in';
                        
                        setTimeout(() => {
                            header.style.display = 'none';
                        }, 300);
                    }
                    
                    allHidden = allHidden && (header.style.display === 'none');
                }
            });
        });
        
        localStorage.setItem('bilibiliHeaderHidden', allHidden);
    }
    
    // 页面加载完成后初始化
    window.addEventListener('load', () => {
        const headerSelectors = [
            '.bili-header.fixed-header',
            '.bili-main-header',
            '.bili-header-m',
            '.header-wrapper',
            'header[class*="header"]',
            'div[class*="nav"]',
            '#bilibili-player .bpx-player-header'
        ];
        
        // 初始设置导航栏状态
        headerSelectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(header => {
                if (header && isHidden) {
                    header.style.display = 'none';
                }
            });
        });
        
        // 创建控制按钮
        waitForElement('body', createToggleButton);
        
        // 监听页面变化，确保按钮在SPA导航后仍能显示
        new MutationObserver(mutations => {
            if (!document.getElementById('bilibili-header-toggle')) {
                createToggleButton();
            }
        }).observe(document.body, { childList: true, subtree: true });
    });
})();