JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<script src="http://www.thepetedesign.com/demos/jquery.onepage-scroll.js"></script>
<link rel="stylesheet" href="http://www.thepetedesign.com/demos/onepage-scroll.css">
<div class="main">
    <section><h2>Section One</h2></section>
    <section id="mySection"><h2>Section Two</h2></section>
    <section><h2>Section Three</h2></section>
</div>

CSS

section {
    font-family: 'Ubuntu', sans-serif;
    padding: 20px;
}

h2 {
    color: #666;
}

JavaScript

$(".main").onepage_scroll({
   sectionContainer: "section",
   animationTime: 1000,
   pagination: true,
   updateURL: false,
   beforeMove: function (index) {},
   afterMove: function (index) {
       if ($('#mySection').hasClass('active')) {
           alert('My section has become active');
       }
   },
   loop: false,
   responsiveFallback: false
});