custom.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. // The number of pixels the user must scroll by before the logo is hidden.
  2. const scrollTopPixels = 40;
  3. // Hide the navigation bar logo when scrolling down on desktop platforms.
  4. // The logo is quite tall, so this helps make the rest of the navigation bar
  5. // more readable.
  6. function registerOnScrollEvent(mediaQuery) {
  7. // The navigation bar that contains the logo.
  8. const $navbar = $('.wy-side-scroll');
  9. // The anchor that contains the logo. This element will be hidden
  10. // (instead of hiding just the logo), otherwise, a small clickable area
  11. // would remain visible.
  12. const $logo = $('.wy-side-nav-search > a');
  13. if (mediaQuery.matches) {
  14. // We're on desktop; register the scroll event.
  15. $navbar.scroll(function() {
  16. if ($(this).scrollTop() >= scrollTopPixels) {
  17. $logo.hide();
  18. } else {
  19. $logo.show();
  20. }
  21. });
  22. } else {
  23. // We're on mobile; unregister the scroll event so the logo isn't hidden
  24. // when scrolling.
  25. $logo.show();
  26. $navbar.unbind('scroll');
  27. }
  28. }
  29. $(document).ready(() => {
  30. const mediaQuery = window.matchMedia('only screen and (min-width: 768px)');
  31. registerOnScrollEvent(mediaQuery);
  32. mediaQuery.addListener(registerOnScrollEvent);
  33. });