JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<header class="header">
  <div class="brand">Poptart</div>
  <div class="search">
    <input type="text" placeholder="Search stuff">
  </div>
  <div class="options">
    <div class="item">Clothes</div>
    <div class="item">Condoms</div>
    <div class="item">Dolls</div>
    <div class="item">Dildos</div>
  </div>
</header>
<nav class="nav">
  <div class="item">Clothes</div>
  <div class="item">Condoms</div>
  <div class="item">Dildos</div>
  <div class="item">Dolls</div>
  <div class="item">Reddit</div>
  <div class="item">Porno</div>
  <div class="item">Stuff</div>
  <div class="item">More Stuff</div>
</nav>
<section class="content">
  <div class="picture">
    <img src="https://dummyimage.com/400x300/000/fff.png&text=Item" alt="">
  </div>
  <div class="description">
    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
    <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, laudantium, numquam! Accusantium maxime temporibus numquam repellendus placeat eaque minima, soluta quas velit illo asperiores nobis provident veniam qui quod ratione dignissimos. Repellat consequatur voluptates vitae impedit voluptate rerum nulla ab rem doloremque ea odio fuga, at incidunt numquam expedita. Optio ex rem nisi, quae numquam qui soluta debitis esse et iusto consequatur recusandae illum minus, rerum veritatis, eveniet dolore modi laborum. Quo quidem deleniti, eaque iusto doloribus, maiores quos nesciunt? Maxime omnis consequuntur illo, perspiciatis cum ducimus doloribus quo non facere ad, earum dignissimos. Unde eos recusandae odit necessitatibus aliquid, iste quam quas maxime ullam error esse provident quia ea quis iure, corrupti id accusantium! Numquam soluta natus, doloremque maxime aspernatur fugit vitae ut facilis, commodi iure, qui explicabo aut voluptatibus magni! Eaque facilis nihil dolorum corporis! Pariatur doloribus quis, nostrum, maiores, iure, tenetur assumenda ratione reprehenderit voluptas illo veniam praesentium...

SCSS

body { font-family: 'Helvetica'; }
.header {
  height: 60px;
  background-color: cornflowerblue;
  line-height: 60px;
  padding: 0 30px;
  
  div:not(.options) { float: left; }
  
  .brand {
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
    color: #fff;
  }
  .search {
    margin-left: 30px;
    input[type=text] {
      border: 1px solid #aaa;
      padding: 10px;
      min-width: 250px;
    }
  }
  .options {
    float: right;
    .item {
      color: #fff;
      margin-left: 20px;
      font-weight: bold;
    }
  }
}

.nav {
  height: 40px;
  text-align: center;
  background-color: #ddd;
  line-height: 40px;
  div {
    display: inline-block;
    margin-left: 50px;
  }
}

.content {
  padding: 20px;
  .picture {
    float: left;
    overflow: hidden;
    margin-right: 20px;
  }
  .description {
    h1 {
      font-weight: bold;
      font-size: 1.5em;
    }
  }
}

.fixed {
  position: fixed;
  left: 20px;
  top: 10px;
}

JavaScript

document.addEventListener('scroll', function(e) {
const el = document.querySelector('.picture > img');
	if (e.pageY > 100) {
  	el.classList.add('fixed');
  }
  else {
  	el.classList.remove('fixed');
  }
});