您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Makes the page header (the search box) "sticky" when you scroll.
当前为
- // ==UserScript==
- // @name Wowhead Fixed Search Header
- // @description Makes the page header (the search box) "sticky" when you scroll.
- // @namespace drnick
- // @include *wowhead.com*
- // @grant none
- // @version 1.2.0
- // ==/UserScript==
- (function() {
- if (typeof jQuery == "undefined") throw "jQuery not found";
- if (window.top != window.self) return;
- var $ = jQuery;
- var $window = $(window);
- var $header = $(".header-search");
- var $headerInput = $(".header-search input");
- if ($header.length == 0) throw "#header not found";
- var styles = [
- ".header-search.sticky {",
- "position: fixed;",
- "top: 5px;",
- "right: 5px;",
- "z-index: 9999;",
- "-width: 300px;",
- "box-shadow: 0 6px 8px #000;",
- "margin-right: 10px;",
- "opacity: 0.7;",
- "}",
- ".header-search.sticky[data-has-focus=true] {",
- "opacity: 1;",
- "}",
- ".header-search.sticky form {",
- "position: static !important;",
- "}",
- ".header-search.sticky input {",
- "width: 260px !important;",
- "-padding: 2px !important;",
- "}",
- ".header-search.sticky .header-search-button {",
- "top: 2px !important;",
- "left: 0px !important;",
- "-height: 26px;",
- "-line-height: 26px;",
- "}",
- ".header-search.sticky .data-env-links {",
- "display: none;",
- "}",
- ".fixed-interior-sidebar {",
- "margin-top: 3em;",
- "}",
- ].join("\n");
- $liveSearchStyle = $("<style type='text/css'></style");
- $("head").append("<style type='text/css'>" + styles + "</style>");
- $("head").append($liveSearchStyle);
- var offset = $header.offset().top;
- var height = $header.height();
- var $dummy = $header.clone();
- $dummy.empty();
- $dummy.attr("id", "header-dummy");
- $dummy.hide();
- $dummy.insertAfter($header);
- var liveSearchStyle = $liveSearchStyle.get(0);
- var isFloating = false;
- var liveSearchLeft = 0;
- var liveSearchTop = 0;
- var liveSearchWidth = 0;
- var liveSearchPos = "absolute";
- $window.on("scroll resize", function(event) {
- var scrollTop = $window.scrollTop();
- var recalc = true;
- if (!isFloating && scrollTop > offset) {
- $header.addClass("sticky");
- $dummy.show();
- isFloating = true;
- liveSearchPos = "fixed";
- }
- else if (isFloating && scrollTop <= offset) {
- $header.removeClass("sticky");
- $dummy.hide();
- isFloating = false;
- liveSearchPos = "absolute";
- }
- else
- recalc = false;
- if (recalc || event.type == "resize") {
- console.log("recalc");
- liveSearchLeft = $header.offset().left | 0;
- liveSearchTop = ($header.offset().top + $header.height()) | 0;
- liveSearchWidth = $headerInput.outerWidth() | 0;
- if (isFloating) {
- liveSearchTop -= ($window.scrollTop() | 0);
- liveSearchStyle.innerHTML = ".live-search { "
- + "position:" + liveSearchPos + " !important; "
- + "top: " + liveSearchTop + "px !important; "
- + "left: " + liveSearchLeft + "px !important; "
- + "width: " + liveSearchWidth + "px !important; "
- + "}";
- }
- else
- liveSearchStyle.innerHTML = "";
- }
- });
- $window.trigger('scroll');
- })();