Smart Header for Zhihu

根据页面滚动,自动隐藏及显示知乎顶栏。

  1. // ==UserScript==
  2. // @name Smart Header for Zhihu
  3. // @namespace org.sorz.lab.zhihu
  4. // @include http://www.zhihu.com/*
  5. // @version 0.2
  6. // @grant none
  7. // @description 根据页面滚动,自动隐藏及显示知乎顶栏。
  8. // ==/UserScript==
  9.  
  10. $(document).ready(function() {
  11. var $header = $('.zu-top');
  12. var headerHeight = $header.outerHeight() + 3;
  13. var refPos = $(document).scrollTop();
  14. var headerPos = 0;
  15. function isHidden() {
  16. return headerPos <= -headerHeight;
  17. }
  18. function isShown() {
  19. return headerPos >= 0;
  20. }
  21. $(window).scroll(function() {
  22. var scroll = $(document).scrollTop() - refPos;
  23. if (Math.abs(scroll) > headerHeight) {
  24. var oldHeaderPos = headerPos;
  25. headerPos = scroll > 0 ? -headerHeight : 0;
  26. if (headerPos != oldHeaderPos)
  27. $header.animate({top: headerPos + 'px'}, 200);
  28. refPos = $(document).scrollTop();
  29. return;
  30. }
  31. if ((scroll > 0 && !isHidden()) || (scroll < 0 && !isShown())) {
  32. headerPos = scroll > 0 ? -scroll : -headerHeight - scroll;
  33. $header.css('top', headerPos + 'px');
  34. } else {
  35. refPos = $(document).scrollTop();
  36. }
  37. });
  38. });

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址