☰

W3Schools +

W3Schools with more freedom

当前为 2017-09-08 提交的版本，查看 最新版本。

// ==UserScript==
// @name         W3Schools +
// @namespace    https://greasyfork.runtimutd.eu.org/users/37096/
// @version      1.0.0
// @description  W3Schools with more freedom
// @author       Hồng Minh Tâm
// @match        https://www.w3schools.com/*/*.asp
// @icon         https://www.w3schools.com/favicon.ico
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
// @compatible   chrome
// @compatible   firefox
// @compatible   opera
// @license      GNU GPLv3
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle([
        '#list-title-children { background-color: #dbefdc; }',
        '#list-title-children a { padding-left: 30px; }',
        '#list-title-children a.active { color: #000000; background-color: #b7dfb8; }'
    ].join('\n'));

    var listTitleChildElement = $('<div/>', {
        id: 'list-title-children'
    }).insertAfter($('#leftmenuinnerinner>.active:eq(0)'));

    var index = 0;
    $('#main > h2').each(function() {
        if($(this).prop('tagName') === "H1" || $(this).prop('tagName') === "H2") {
            var idTitleChildren = 'title-'+ (++index);
            $(this).attr({
                'data-id': idTitleChildren,
                class: 'title-children-section'
            });
            var titleChildrenElement = $('<a/>', {
                href: '#'+idTitleChildren,
                class: 'item-title-children'
            }).text($(this).text()).appendTo(listTitleChildElement);
        }
    });

    $('.item-title-children[href^="#"]').click(function(e) {
        e.preventDefault();
        $(document).off('scroll');
        $('a.item-title-children').each(function () {
            $(this).removeClass('active');
        });
        $(this).addClass('active');

        var target = this.hash.replace('#', ''),
            $target = $('h2[data-id="'+target+'"]');

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - $('#topnav').height() - 5
        }, 300, 'swing', function() {
            window.location.hash = target;
            $(document).on('scroll', onScroll);
        });
    });

    $(document).on('scroll', onScroll);
    if(window.location.hash) {
        $('.item-title-children[href^="'+window.location.hash+'"]').click();
    }
    function onScroll(e) {
        var scrollPosition = $(document).scrollTop() + $('#topnav').height() + 10;
        $('.title-children-section').each(function(index, element) {
            var nextElement = $('.title-children-section').eq(index + 1);
            var target = $(this).data('id');
            if($(this).position().top < scrollPosition && (nextElement.position()?nextElement.position().top:($('#main').position().top+$('#main').height())) - 10 > scrollPosition) {
                $('.item-title-children').removeClass('active');
                $('.item-title-children[href^="#'+target+'"]').addClass('active');
                window.location.hash = target;
            } else {
                $('.item-title-children[href^="#'+target+'"]').removeClass('active');
            }
        });
    }
})();