JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="wrapper">

  <div id="logo">
    <img src="https://dummyimage.com/200x200/000/fff">
  </div>

  <div>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
    <p>This is some filler text</p>
  </div>

</div>

CSS

#wrapper { border: 1px solid green; }

#logo img { width: 300px; }
.scrolled #logo img { width: 100px; }

JavaScript

$(window).scroll(function(e) {
  if ($(window).scrollTop() > 50) {
    document.body.classList.add("scrolled");
  } else {
    document.body.classList.remove("scrolled");
  }
})