prof3ssorSt3v3/collapsing.html

## collapsing.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shrinking Header</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        font-weight: 100;
        box-sizing: border-box;
      }
      html {
        font-size: 20px;
        line-height: 1.7;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
      body {
        margin-top: 6rem;
      }
      /* default header styles */
      header {
        width: 100vw;
        position: fixed;
        top: 0;
        height: 6rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: cornflowerblue;
        color: white;
        transition: all 0.4s linear;
      }
      header h1 {
        font-size: 3rem;
        padding: 1rem 1rem;
        line-height: 1;
        font-weight: 700;
        text-shadow: 1px 1px 2px #333;
        transition: all 0.4s linear;
      }
      header nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
      nav a,
      nav a:visited {
        font-size: 1.5rem;
        padding: 1rem 1rem;
        line-height: 1;
        color: white;
        transition: all 0.4s linear;
      }
      nav a:hover,
      nav a:active,
      nav a:focus {
        color: #333;
      }
      /* small header styles */
      .up header {
        height: 2.5rem;
      }
      .up header h1 {
        font-size: 1.5rem;
        padding: 0.25rem 1rem;
      }
      .up nav a {
        font-size: 1rem;
        padding: 0.5rem 1rem;
      }

      /* main content styles */
      main {
        padding: 2rem 2rem;
      }
      main h2,
      main h3 {
        font-weight: 500;
      }
      main p {
        margin: 1rem 0;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        window.addEventListener("scroll", debounce(rollup));
      });

      function rollup(ev) {
        console.log(window.scrollY);
        if (window.scrollY > 60) {
          document.body.classList.add("up");
        } else {
          document.body.classList.remove("up");
        }
      }

      //use debounce for better performance
      const debounce = func => {
        let timer;
        return event => {
          if (timer) {
            clearTimeout(timer);
          }
          //100ms is the current delay being used
          timer = setTimeout(func, 100, event);
        };
      };
    </script>
  </head>
  <body class="">
    <header>
      <h1>WebSight</h1>
      <nav>
        <a href="#">Home</a>
        <a href="#">Away</a>
        <a href="#">Contact</a>
      </nav>
    </header>
    <main>
      <h2>Something Interesting</h2>
      <h3>Scroll the page and watch the header bar shrink</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
        cupiditate saepe eius error dolore eum tempora doloribus est ratione
        modi ipsum fuga, minima enim qui repellat ad, ex voluptatem quaerat.
      </p>
      <p>
        Ut dolor minima aliquam a animi reiciendis quas mollitia fugiat
        temporibus voluptate dicta ex eveniet officia, saepe voluptatum culpa
        labore minus nihil explicabo ipsa fuga soluta atque asperiores. Nostrum,
        quasi.
      </p>
      <p>
        Quam optio fugit aliquid? Distinctio, soluta vitae voluptate eveniet rem
        consequatur repellendus perferendis dolorum expedita. Sint eligendi
        eveniet libero deserunt sequi assumenda, harum aspernatur ipsa, eum,
        incidunt blanditiis debitis quibusdam?
      </p>
      <p>
        Cum quisquam impedit, at ex debitis consequatur veniam iusto veritatis
        excepturi voluptate nam delectus voluptatum autem quam velit tempore
        suscipit incidunt? Tenetur nulla facilis cumque eum mollitia dignissimos
        consequuntur odit!
      </p>
      <p>
        Et, natus ab! Debitis distinctio beatae eveniet laudantium aspernatur
        ipsam, ex temporibus voluptates! Beatae sed pariatur itaque non dolorem
        quos ipsam numquam eum, iusto possimus porro totam eius a illo.
      </p>
      <p>
        Deserunt nemo molestiae dolorum ducimus enim necessitatibus unde ullam
        tempore nihil, quae assumenda animi fugit reprehenderit minima suscipit,
        nobis illo quos quibusdam. Quo corporis ea incidunt. Atque ipsam ipsa
        illum.
      </p>
      <p>
        Accusamus perspiciatis autem explicabo labore fuga eligendi officiis
        delectus itaque sapiente consequuntur illo, libero perferendis saepe aut
        beatae necessitatibus voluptatibus odio repellat, quasi, ipsam vel quis
        error. Cum, voluptate! Sapiente!
      </p>
      <p>
        Culpa quam, voluptatibus eaque fugiat velit ratione? Sapiente ratione
        iure, ullam quidem itaque nam vero officiis est repellendus obcaecati,
        necessitatibus laborum nulla, dolore eos id labore ea nesciunt aliquid.
        Quod.
      </p>
      <p>
        Ducimus laboriosam architecto quas quos magnam voluptatibus possimus
        nulla vel commodi, distinctio velit maxime perspiciatis eos mollitia
        delectus, libero voluptas? Quo quia fugit illo eligendi voluptatibus
        corporis quibusdam ducimus praesentium.
      </p>
      <p>
        Vel maxime saepe accusantium rem minima sed tempora, harum, eum magni,
        dignissimos maiores laborum eius culpa nihil a non sit vero quia. Eum
        dolorem tempore aliquid sint? Cupiditate, labore recusandae.
      </p>
      <p>
        Ipsa libero perspiciatis perferendis, repellendus, vitae, distinctio
        optio magni aliquid totam quis quisquam earum? Explicabo placeat
        quibusdam, qui error perferendis voluptas expedita exercitationem
        consequuntur eum possimus voluptate molestias ea aspernatur.
      </p>
      <p>
        Ea, et laboriosam consectetur saepe voluptas dicta ad eum sed quidem.
        Dolorum ipsum officiis reiciendis tenetur libero laudantium alias maxime
        delectus totam consequuntur in, nisi accusamus velit iste itaque
        doloribus!
      </p>
    </main>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Shrinking Header</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	font-weight: 100;
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}
	body {
	margin-top: 6rem;
	}
	/* default header styles */
	header {
	width: 100vw;
	position: fixed;
	top: 0;
	height: 6rem;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	background-color: cornflowerblue;
	color: white;
	transition: all 0.4s linear;
	}
	header h1 {
	font-size: 3rem;
	padding: 1rem 1rem;
	line-height: 1;
	font-weight: 700;
	text-shadow: 1px 1px 2px #333;
	transition: all 0.4s linear;
	}
	header nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	}
	nav a,
	nav a:visited {
	font-size: 1.5rem;
	padding: 1rem 1rem;
	line-height: 1;
	color: white;
	transition: all 0.4s linear;
	}
	nav a:hover,
	nav a:active,
	nav a:focus {
	color: #333;
	}
	/* small header styles */
	.up header {
	height: 2.5rem;
	}
	.up header h1 {
	font-size: 1.5rem;
	padding: 0.25rem 1rem;
	}
	.up nav a {
	font-size: 1rem;
	padding: 0.5rem 1rem;
	}

	/* main content styles */
	main {
	padding: 2rem 2rem;
	}
	main h2,
	main h3 {
	font-weight: 500;
	}
	main p {
	margin: 1rem 0;
	}
	</style>
	<script>
	document.addEventListener("DOMContentLoaded", () => {
	window.addEventListener("scroll", debounce(rollup));
	});

	function rollup(ev) {
	console.log(window.scrollY);
	if (window.scrollY > 60) {
	document.body.classList.add("up");
	} else {
	document.body.classList.remove("up");
	}
	}

	//use debounce for better performance
	const debounce = func => {
	let timer;
	return event => {
	if (timer) {
	clearTimeout(timer);
	}
	//100ms is the current delay being used
	timer = setTimeout(func, 100, event);
	};
	};
	</script>
	</head>
	<body class="">
	<header>
	<h1>WebSight</h1>
	<nav>
	<a href="#">Home</a>
	<a href="#">Away</a>
	<a href="#">Contact</a>
	</nav>
	</header>
	<main>
	<h2>Something Interesting</h2>
	<h3>Scroll the page and watch the header bar shrink</h3>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
	cupiditate saepe eius error dolore eum tempora doloribus est ratione
	modi ipsum fuga, minima enim qui repellat ad, ex voluptatem quaerat.
	</p>
	<p>
	Ut dolor minima aliquam a animi reiciendis quas mollitia fugiat
	temporibus voluptate dicta ex eveniet officia, saepe voluptatum culpa
	labore minus nihil explicabo ipsa fuga soluta atque asperiores. Nostrum,
	quasi.
	</p>
	<p>
	Quam optio fugit aliquid? Distinctio, soluta vitae voluptate eveniet rem
	consequatur repellendus perferendis dolorum expedita. Sint eligendi
	eveniet libero deserunt sequi assumenda, harum aspernatur ipsa, eum,
	incidunt blanditiis debitis quibusdam?
	</p>
	<p>
	Cum quisquam impedit, at ex debitis consequatur veniam iusto veritatis
	excepturi voluptate nam delectus voluptatum autem quam velit tempore
	suscipit incidunt? Tenetur nulla facilis cumque eum mollitia dignissimos
	consequuntur odit!
	</p>
	<p>
	Et, natus ab! Debitis distinctio beatae eveniet laudantium aspernatur
	ipsam, ex temporibus voluptates! Beatae sed pariatur itaque non dolorem
	quos ipsam numquam eum, iusto possimus porro totam eius a illo.
	</p>
	<p>
	Deserunt nemo molestiae dolorum ducimus enim necessitatibus unde ullam
	tempore nihil, quae assumenda animi fugit reprehenderit minima suscipit,
	nobis illo quos quibusdam. Quo corporis ea incidunt. Atque ipsam ipsa
	illum.
	</p>
	<p>
	Accusamus perspiciatis autem explicabo labore fuga eligendi officiis
	delectus itaque sapiente consequuntur illo, libero perferendis saepe aut
	beatae necessitatibus voluptatibus odio repellat, quasi, ipsam vel quis
	error. Cum, voluptate! Sapiente!
	</p>
	<p>
	Culpa quam, voluptatibus eaque fugiat velit ratione? Sapiente ratione
	iure, ullam quidem itaque nam vero officiis est repellendus obcaecati,
	necessitatibus laborum nulla, dolore eos id labore ea nesciunt aliquid.
	Quod.
	</p>
	<p>
	Ducimus laboriosam architecto quas quos magnam voluptatibus possimus
	nulla vel commodi, distinctio velit maxime perspiciatis eos mollitia
	delectus, libero voluptas? Quo quia fugit illo eligendi voluptatibus
	corporis quibusdam ducimus praesentium.
	</p>
	<p>
	Vel maxime saepe accusantium rem minima sed tempora, harum, eum magni,
	dignissimos maiores laborum eius culpa nihil a non sit vero quia. Eum
	dolorem tempore aliquid sint? Cupiditate, labore recusandae.
	</p>
	<p>
	Ipsa libero perspiciatis perferendis, repellendus, vitae, distinctio
	optio magni aliquid totam quis quisquam earum? Explicabo placeat
	quibusdam, qui error perferendis voluptas expedita exercitationem
	consequuntur eum possimus voluptate molestias ea aspernatur.
	</p>
	<p>
	Ea, et laboriosam consectetur saepe voluptas dicta ad eum sed quidem.
	Dolorum ipsum officiis reiciendis tenetur libero laudantium alias maxime
	delectus totam consequuntur in, nisi accusamus velit iste itaque
	doloribus!
	</p>
	</main>
	</body>
	</html>