☰

Wowhead Fixed Search Header

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