JSFiddle - React, Tailwind, and code Playground

by Adrien Be

HTML

<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.min.js"></script>
<body>
  <div id="fullpage">
    <div class="section">
      <div id="fixed-elem-wrap-1" class="fixed-elem-wrap">
        <div id="fixed-elem" class="fixed-elem">
          My fixed element
          <br> My fixed element
          <br> My fixed element
          <br> My fixed element
          <br> My fixed element
          <br>
          <br>
          <br>
          <br> My fixed element
          <br> My fixed element
          <br> My fixed element
          <br> My fixed element
          <br>
          <br>
          <br>
          <br> Another text
          <br> Another text
          <br> Another text
          <br> Another text
          <br>
          <br>
          <br>
          <br> Another text
          <br> Another text
          <br> Another text
          <br> Another text
        </div>
      </div>
      <div class="intro">
        <h1>Scrolling inside sections</h1>
        <p>Easy and useful! Just make use of the option `scrollOverflow` for it and add the slimScroll plugin!
          <br>
        </p>

        <p>Eu nec ferri molestie consequat, vel at alia dolore putant. Labore philosophia ut vix. In vis nostrud interesset appellantur, vis et tation feugiat scripserit. Te nec noster suavitate persecuti. Diceret erroribus cu vix, alii omnes ei sit. Sea
          an corrumpit patrioque, virtute accumsan nominavi et usu, ex mei dolore vocibus incorrupte. Duo ea saperet tacimates. Sed possim prodesset no, per novum putent doctus ea. Eu mea magna aliquip graecis, pri corpora officiis complectitur ei,...

CSS

h1 {
  font-size: 3em;
}

h2 {
  font-size: 2.4em;
}

h1,
h2,
p {
  color: white;
  padding: 30px;
}

.fixed-elem-wrap {
  position: relative;
  height: 0;
}

.fixed-elem {
  position: absolute;
  z-index: 500;
  top: 100px;
  right: 20px;
  padding: 20px;
  background-color: rgba(250, 250, 250, 0.5);
  transition: top 0.5s cubic-bezier(0, 1.4, 1, 1);
}

JavaScript

$(document).ready(function() {

  $('#fullpage').fullpage({
    sectionsColor: ['#4A6FB1', '#939FAA', '#323539', '#49AAFF'],
    scrollOverflow: true,
    onLeave: function(index, nextIndex, direction) {
      moveFixedElemToSlide(nextIndex, direction);
    }
  });

  function moveFixedElemToSlide(movingToIndex, direction) {
    	var incrementation = (direction==='down')? 1 : -1;
      var movingFromIndex = movingToIndex - incrementation;
      var elemMoved = $('#fixed-elem-wrap-'+movingFromIndex).contents();
      $('#fixed-elem-wrap-'+movingToIndex).append(elemMoved);   }
  
});