O'Reilly Helper

🎴 Enhance your O'Reilly learning experience: smoothly hide header and footer on scroll down, and show them (with cute transparency!) on scroll up.

Install this script ?

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name        O'Reilly Helper
// @namespace   https://github.com/mefengl
// @version     0.2.0
// @description 🎴 Enhance your O'Reilly learning experience: smoothly hide header and footer on scroll down, and show them (with cute transparency!) on scroll up.
// @author      mefengl
// @match       https://learning.oreilly.com/library/view/*
// @icon        https://www.google.com/s2/favicons?sz=64&domain=oreilly.com
// @license     MIT
// @grant       GM_addStyle
// ==/UserScript==

(function () {
  'use strict';

  GM_addStyle(`
      header, #content-navigation {
          transition: opacity 0.5s linear;
      }
  `);

  let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  let isScrollingDown = false;

  let header = document.querySelector('header');
  let footer = document.querySelector('#content-navigation');

  if (header) {
    header.style.opacity = '0.6';
    header.style.transition = 'opacity 0.5s';
  }

  if (footer) {
    footer.style.opacity = '0';
    footer.style.transition = 'opacity 0.5s';
  }

  window.addEventListener('scroll', function () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollTop > lastScrollTop && !isScrollingDown) {
      isScrollingDown = true;
      // On scroll down, hide header and footer
      if (header) header.style.opacity = '0';
      if (footer) footer.style.opacity = '0';
    } else if (scrollTop < lastScrollTop && isScrollingDown) {
      isScrollingDown = false;
      // On scroll up, show header and footer
      if (header) header.style.opacity = '0.6';
      if (footer) footer.style.opacity = '0.6';
    }

    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For mobile
  }, false);

})();