☰

Wowhead Fixed Search Header

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

当前为 2016-10-07 提交的版本，查看 最新版本。

  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.1.5
  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: 4px;",
  27. 			"right: 4px;",
  28. 			"z-index: 9999;",
  29. 			"width: 302px;",
  30. 			"box-shadow: 0 6px 8px #000;",
  31. 		"}",
  32. 		".header-search.sticky input {",
  33. 			"width: 260px;",
  34. 			"padding: 2px;",
  35. 			"margin-left: -22px;",
  36. 		"}",
  37. 		".header-search.sticky a {",
  38. 			"height: 26px;",
  39. 			"line-height: 26px;",
  40. 		"}",		
  41. 	].join("\n");
  42. 	
  43. 	$liveSearchStyle = $("<style type='text/css'></style");
  44. 	
  45. 	$("head").append("<style type='text/css'>" + styles + "</style>");
  46. 	$("head").append($liveSearchStyle);
  47. 	
  48. 	var offset = $header.offset().top;
  49. 	var height = $header.height();
  50. 	
  51. 	var $dummy = $header.clone();
  52. 	$dummy.empty();
  53. 	$dummy.attr("id", "header-dummy");
  54. 	$dummy.hide();
  55. 	
  56. 	$dummy.insertAfter($header);
  57. 	
  58. 	var liveSearchStyle = $liveSearchStyle.get(0);
  59. 	
  60. 	var isFloating = false;	
  61. 	var liveSearchLeft = 0;
  62. 	var liveSearchTop = 0;
  63. 	var liveSearchWidth = 0;
  64. 	var liveSearchPos = "absolute";
  65. 	
  66. 	$window.scroll(function() {
  67. 		var scrollTop = $window.scrollTop();
  68. 		var recalc = true;
  69. 		
  70. 		if (!isFloating && scrollTop > offset) {
  71. 			$header.addClass("sticky");
  72. 			$dummy.show();
  73. 			isFloating = true;
  74. 			liveSearchPos = "fixed";
  75. 			$(".beta-ptr-links").hide();
  76. 		}
  77. 		else if (isFloating && scrollTop <= offset) {
  78. 			$header.removeClass("sticky");
  79. 			$dummy.hide();
  80. 			isFloating = false;
  81. 			liveSearchPos = "absolute";
  82. 			$(".beta-ptr-links").show();
  83. 		}
  84. 		else
  85. 			recalc = false;
  86. 		
  87. 		if (recalc) {
  88. 			liveSearchLeft = $header.offset().left | 0;
  89. 			liveSearchTop = ($header.offset().top + $header.height()) | 0;
  90. 			liveSearchWidth = $headerInput.outerWidth() | 0;
  91. 			
  92. 			if (isFloating) liveSearchTop -= ($window.scrollTop() | 0);
  93. 			
  94. 			liveSearchStyle.innerHTML = ".live-search { position:" + liveSearchPos + "; top: " + liveSearchTop + "px !important; " +
  95. 			"left: " + liveSearchLeft + "px !important; " + 
  96. 			"width: " + liveSearchWidth + "px !important; }";
  97. 		}
  98. 	});
  99. 	
  100. 	$window.trigger('scroll');
  101. 	
  102. })();