Question

我正在尝试编写一个Greasemonkey脚本，该脚本会在每个加载的网页上放置一个导航侧边栏，但我仍然不知道如何在不覆盖每个网页上的内容的情况下执行此操作。页。有没有办法在每个页面的侧面放置div，而不会覆盖任何页面的内容？

Answer 1

question you linked's accepted answer在整个页面上放置一个偏移量，同时展示顶部栏，而不是侧栏。这种技术对于右侧边栏来说是糟糕的，因为它会切断（隐藏）页面左侧的一部分。

如果你想要走这条路线（我不推荐），更好的方法是调整页面宽度。这是完整的Greasemonkey脚本中的一种方式：

// ==UserScript==
// @name     _Sidebar on page
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var sidebarWidth    = "100px";

$("html").css ( {
    position:   "relative",
    width:      "calc(100% - " + sidebarWidth + ")"
} );

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  calc(" + sidebarWidth + " - 2ex)    \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );

使用CSS来定位和设置所有内容，并使用jQuery简化代码并使其更加健壮/可移植。

但是，不是压缩或移动页面，而是可能破坏其布局，继续并掩盖一些右侧内容。 This is almost always wasted space that usually gets ignored（以及其他一些链接和研究）。

如果您的侧边栏基本上不可见，当没有悬停在上面，并且有一个方便的键盘快捷方式来切换其可见性时，那么它有时会部分地掩盖右侧内容将毫无困难。我已经使用这种技术多年了，效果很好。

完整的Greasemonkey脚本是这样做的：

// ==UserScript==
// @name     _Add a Sidebar to a page with auto fade and keyboard shortcut
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <p>F9 toggles visibility</p>                                \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

//-- Fade panel when not in use
var kbShortcutFired = false;
var rightSideBar    = $('#gmRightSideBar');
rightSideBar.hover (
    function () {
        $(this).stop (true, false).fadeTo (50,  1  );
        kbShortcutFired = false;
    },
    function () {
        if ( ! kbShortcutFired ) {
            $(this).stop (true, false).fadeTo (900, 0.1);
        }
        kbShortcutFired = false;
    }
);
rightSideBar.fadeTo (2900, 0.1);

//-- Keyboard shortcut to show/hide our sidebar
$(window).keydown (keyboardShortcutHandler);

function keyboardShortcutHandler (zEvent) {
    //--- On F9, Toggle our panel's visibility
    if (zEvent.which == 120) {  // F9
        kbShortcutFired = true;

        if (rightSideBar.is (":visible") ) {
            rightSideBar.stop (true, false).hide ();
        }
        else {
            //-- Reappear opaque to start
            rightSideBar.stop (true, false).show ();
            rightSideBar.fadeTo (0, 1);
            rightSideBar.fadeTo (2900, 0.1);
        }

        zEvent.preventDefault ();
        zEvent.stopPropagation ();
        return false;
    }
}

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  100px;                              \
        z-index:                6666;                               \
        opacity:                0.9;                                \
    }                                                               \
    #gmRightSideBar p {                                             \
        font-size:              80%;                                \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );

使用Greasemonkey脚本在每个页面上放置一个侧边栏

1 个答案: