☰

Wowhead Fixed Search Header

Makes the page header (the search box) "sticky" when you scroll.

  1. // ==UserScript==
  2. // @name         Wowhead Fixed Search Header
  3. // @description  Makes the page header (the search box) "sticky" when you scroll.
  4. // @namespace    drnick
  5. // @include      *wowhead.com*
  6. // @grant        none
  7. // @version      1.2.0
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.  
  12. 	if (typeof jQuery == "undefined") throw "jQuery not found";
  13. 	if (window.top != window.self) return;
  14. 	
  15. 	var $ = jQuery;
  16. 	
  17. 	var $window = $(window);
  18. 	var $header = $(".header-search");
  19. 	var $headerInput = $(".header-search input");
  20. 	
  21. 	if ($header.length == 0) throw "#header not found";
  22. 	
  23. 	var styles = [
  24. 		".header-search.sticky {",
  25. 			"position: fixed;",
  26. 			"top: 5px;",
  27. 			"right: 5px;",
  28. 			"z-index: 9999;",
  29. 			"-width: 300px;",
  30. 			"box-shadow: 0 6px 8px #000;",
  31.             "margin-right: 10px;",
  32.             "opacity: 0.7;",
  33. 		"}",
  34.         ".header-search.sticky[data-has-focus=true] {",
  35.             "opacity: 1;",
  36. 		"}",
  37.         ".header-search.sticky form {",
  38. 			"position: static !important;",
  39. 		"}",
  40. 		".header-search.sticky input {",
  41. 			"width: 260px !important;",
  42. 			"-padding: 2px !important;",
  43. 		"}",
  44. 		".header-search.sticky .header-search-button {",
  45.             "top: 2px !important;",
  46.             "left: 0px !important;",
  47. 			"-height: 26px;",
  48. 			"-line-height: 26px;",
  49. 		"}",
  50.         ".header-search.sticky .data-env-links {",
  51. 			"display: none;",
  52. 		"}",
  53.         ".fixed-interior-sidebar {",
  54. 			"margin-top: 3em;",
  55. 		"}",
  56. 	].join("\n");
  57. 	
  58. 	$liveSearchStyle = $("<style type='text/css'></style");
  59. 	
  60. 	$("head").append("<style type='text/css'>" + styles + "</style>");
  61. 	$("head").append($liveSearchStyle);
  62. 	
  63. 	var offset = $header.offset().top;
  64. 	var height = $header.height();
  65. 	
  66. 	var $dummy = $header.clone();
  67. 	$dummy.empty();
  68. 	$dummy.attr("id", "header-dummy");
  69. 	$dummy.hide();
  70. 	
  71. 	$dummy.insertAfter($header);
  72. 	
  73. 	var liveSearchStyle = $liveSearchStyle.get(0);
  74. 	
  75. 	var isFloating = false;	
  76. 	var liveSearchLeft = 0;
  77. 	var liveSearchTop = 0;
  78. 	var liveSearchWidth = 0;
  79. 	var liveSearchPos = "absolute";
  80. 	
  81. 	$window.on("scroll resize", function(event) {
  82.         var scrollTop = $window.scrollTop();
  83.         var recalc = true;
  84.         
  85.         if (!isFloating && scrollTop > offset) {
  86.             $header.addClass("sticky");
  87.             $dummy.show();
  88.             isFloating = true;
  89.             liveSearchPos = "fixed";
  90.         }
  91.         else if (isFloating && scrollTop <= offset) {
  92.             $header.removeClass("sticky");
  93.             $dummy.hide();
  94.             isFloating = false;
  95.             liveSearchPos = "absolute";
  96.         }
  97.         else
  98.             recalc = false;
  99.         
  100.         if (recalc || event.type == "resize") {
  101.             console.log("recalc");
  102.             liveSearchLeft = $header.offset().left | 0;
  103.             liveSearchTop = ($header.offset().top + $header.height()) | 0;
  104.             liveSearchWidth = $headerInput.outerWidth() | 0;
  105.             
  106.             if (isFloating) {
  107.                 liveSearchTop -= ($window.scrollTop() | 0);
  108.             
  109.                 liveSearchStyle.innerHTML = ".live-search { " 
  110.                         + "position:" + liveSearchPos + " !important; " 
  111.                         + "top: " + liveSearchTop + "px !important; " 
  112.                         + "left: " + liveSearchLeft + "px !important; " 
  113.                         + "width: " + liveSearchWidth + "px !important; "
  114.                     + "}";
  115.             }
  116.             else
  117.                 liveSearchStyle.innerHTML = "";
  118.         }
  119.     });
  120. 	
  121. 	$window.trigger('scroll');
  122. 	
  123. })();