JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="page">
  <header>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. elit. elit. elit .elit. elit.</h1>
  </header>
  <main>
    <aside>Aside</aside>
    <article>
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
    </article>
  </main>
</div>

CSS

header {
  background: gray;
  
}

header h1 {
  transition: font-size 0.2s;
}

main{
  display: flex;
}

.sticky header{
  position: fixed;
}

.sticky header h1 {
  outline: 1px solid red;
  font-size: 18px;
  position: fixed;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  height: 20px;
}

aside,
article {
  transition: margin, 0.2s;
}

aside.b-s,
article.b-s{
  
}

aside.s-b,
article.s-b {
  margin-top: 220px;
}

JavaScript

var header = document.querySelector('header');
var aside = document.querySelector('aside');
var article = document.querySelector('article');
var page = document.querySelector('.page');

var stickyClass = 'sticky';



window.addEventListener('click', () => {
  // from small to big font size
  // from sicky to static
  if (page.classList.contains(stickyClass)) {
  	
    
    page.classList.remove(stickyClass);
  // from big to small font size
  // from static to fixed position
  } else {
  	page.classList.add(stickyClass);
  }
	
});

function getHeaderHeight() {
  return header.clientHeight;
}