JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<nav>
  <ul class="wrap clearfix">
    <li><a href="#" class="title">My Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<div class="main wrap clearfix">
  <article>
  <header class="post-header">
    <h2>Blog post</h2>
    <p class="post-meta">some post meta</p>
  </header>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam praesentium esse est excepturi atque asperiores aspernatur itaque doloribus voluptas mollitia, explicabo qui, laborum commodi officiis soluta veniam! Dolorum, vitae, assumenda!</p>
  <p>Consequuntur pariatur, maxime, esse voluptatum, expedita nemo quidem reprehenderit accusantium quis dolore rerum? Odit sint praesentium explicabo. Quas esse facere provident cum asperiores voluptas, officia molestias ab ex, iure minima.</p>
  <p>Dolor excepturi rerum repudiandae! Eos ipsa, nihil nostrum eaque harum facilis, dolorem nemo quisquam reiciendis! Voluptatum quae impedit architecto quidem odit iure autem consectetur laudantium voluptates ut, natus similique, totam.</p>
  <p>Necessitatibus quo sint error libero ea dolore cupiditate itaque saepe amet officia fugit deserunt culpa, in aliquid porro, quas voluptatibus dicta labore quibusdam nihil totam vel modi maxime adipisci fuga.</p>
  <p>Quae, earum cumque pariatur, eum, magni in quo praesentium iure, ut fugiat voluptas quisquam et molestiae. Eius repellendus voluptatem eaque minus molestiae dolorem voluptatibus, quis pariatur accusamus optio, ut earum.</p>
  <p>Magni tempore consectetur magnam nam expedita ipsa rem ex ab, amet. Possimus incidunt inventore officiis, commodi unde pariatur veniam illo saepe maxime atque dolorum aspernatur id accusamus, ad ex repellat.</p>
  <p>Alias a voluptates eius sed ducimus harum ex unde ratione dolorum adipisci nemo quasi repellendus velit pariatur eos atque rem, nostrum odit voluptatibus odio praesentium aliquam possimus vero. Officiis, illum.</p>
  <p>Iure alias repudiandae vero non vel...

SCSS

nav {
  ul {
    background-color: #23C9FF;
    list-style: none;
    padding: 10px 10px;
    box-sizing: border-box;
    li {
      display: inline-block;
    }
    li:nth-child(n+2) {
      float: right;
      padding: 5px;
    }
  }
  a { 
    text-decoration: none; 
    &.title {
      color: #333;
      font-size: 1.5em;
    }  
  }
}

/* Wrapper */
.wrap {
  width: 75%;
  margin: auto;
}

.main {
  background-color: #F9F8F8;
}

article, .sidebar {
  float: left;
  box-sizing: border-box;
}

article {
  width: 60%;
  padding: 20px;
}

header {
  h2 {
    margin-bottom: 5px;
  }
  .post-meta {
    margin-top: 0;
  }
}

.sidebar {
  width: 40%;
  .widget {
    border: 1px solid;
    height: 100px;
  }
}

.clearfix::after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

JavaScript

var date = new Date();
var widget = document.getElementsByClassName("widget");
document.getElementsByClassName("post-meta")[0].innerText = date;

for (let i = 0; i < widget.length; i++) {
    widget[i].style.backgroundImage = "url(https://unsplash.it/2"+i+"0/200)";
    widget[i].style.backgroundSize = "cover";
}

window.onscroll = function () {
    let a = document.body.scrollTop;
    let b = document.body.scrollHeight - document.body.clientHeight;
    let c = a/b;
    var main = document.getElementsByClassName("main")[0];
    var bar = document.getElementsByClassName("sidebar")[0];
    if (c > 3.687) {
        bar.style.position = "fixed";
        bar.style.top = "0";
        bar.style.right = "95px";
        bar.style.width = "201.594px";
    } else {
        main.style.position = "static";
        bar.style.position = "static";
        bar.style.width = "40%";
    }
		console.log(c);
};