JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="navigation red">test</div>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.
  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.
  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.</p>
  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis nobis. Veritatis porro nemo nihil.
  
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolore doloribus, non reprehenderit, eveniet, ipsa ad cupiditate suscipit error autem accusamus incidunt illo distinctio officiis...

CSS

.red { background:red;}

.blue {background:blue;}

.navigation {
  position: fixed;
}

JavaScript

$(document).ready(function(){
  $(window).scroll(function(){
if ($(window).scrollTop() > 700){
    $('.navigation').addClass( "red");
}
else {
    $('.navigation').removeClass("blue");
}
 });
});


$(document).ready(function(){
  $(window).scroll(function(){
if ($(window).scrollTop() > 600){
    $('.navigation').addClass( "blue");
}
else {
    $('.navigation').removeClass("blue");
}
 });
});