jQuery addClass example

Change class name on click in jQuery

by Richard Hunter

HTML

<div class="container">
  <div id="cloud-1">
  </div>

  <div class="foo">
  </div>

  <h1>
    Hello World
  </h1>
</div>

SCSS

@function calculate-transform($rate, $left, $top, $width) {
 // $scale: 1 / $rate;
  //$distance: ($perspective - ($scale * $perspective)) * 1px;
  //@return translateX($scale * $left) translateY($scale * $top) translateZ($distance) scale($scale);
}

.container {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: lightblue;
  position: relative;
  perspective: 10px;
  perspective-origin: left top;
}

body {
  overflow: hidden;
  height: 100%;
  margin: 0;
}

#cloud-1 {
  background: white;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 150px;
  left: 0;
}

h1 {
  padding: 40px;
  margin-bottom: 2000px;
}

.foo {
  $rate: 1;
  $left: 100px;
  $top: 100px;
  position: absolute;
  transform-origin: left top;
  background: pink;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  transform: foo($rate, $left, $top, 100px);
}

JavaScript

var $cloud1 = $('#cloud-1');
 var $container = $('.container');

 $container.on('scroll', () => {
   $cloud1.css({
     top: function(index, value) {
       return 150 - $container.scrollTop() * 1;
     }
   });
 });