JSFiddle - React, Tailwind, and code Playground

by amullins

HTML

<svg x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" id="svg">
  <a data-offset="0" xlink:href="#firstPage">
    <circle id="smallbluetop" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2"
            stroke-miterlimit="10" cx="249.85" cy="8.643" r="4.976"/>
  </a>
  <a data-offset="1132.5" xlink:href="#secondPage">
    <circle id="smallblueleft" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2"
            stroke-miterlimit="10" cx="488.875" cy="247.667" r="4.976"/>
  </a>
  <a data-offset="755" xlink:href="#thirdPage">
    <circle id="smallbluebottom" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2"
            stroke-miterlimit="10" cx="249.85" cy="486.691" r="4.976"/>
  </a>
  <a data-offset="377.5" xlink:href="#fourthPage">
    <circle id="smallblueright" fill="#FFFFFF" stroke="#2C75FF" stroke-width="2"
            stroke-miterlimit="10" cx="10.826" cy="247.667" r="4.976"/>
  </a>
</svg>
<div id="main">
    <h1 id="intro">This is my intro</h1>
    <div id="firstPage" class="section">First</div>
    <div id="secondPage" class="section">Second</div>
    <div id="thirdPage" class="section">Third</div>
    <div id="fourthPage" class="section">Fourth</div>
    <div class="footer">The End</div>
</div>

CSS

html, body {
    margin:0;
    height:100%;
}

#main {
    height:190px;
    overflow:auto; /*should scroll*/
}

#intro {
    background: black;
    color: white;
    font-family: trebuchet;
    font-weight: bold;
    font-size: 72px;
}

.section {
    display:block;
    position:relative;
    height:100%;
    background: blue;
    color: white;
}

.section:nth-child(odd) {
    background: lightblue;
}

JavaScript

var svg = $("#svg");
var main = $("#main");
var links = svg.find("a");
var numLinks = links.length;

function setXlinkActive(xlink, scrollY) {
    var section = $(xlink.attr("xlink:href"));
    var clientY = section.offset().top;
    console.log("Client Y:", clientY);
    if (scrollY > clientY) {
        xlink.show().addClass("active");
        console.log("I made an xlink active");
    } else {
        xlink.removeClass("active").hide();
    }
}

function goToXlink(xlink) {
    return function(evt) {
        evt.preventDefault();
        var section = $(xlink.attr("xlink:href"));
        var clientY = section.offset().top;
        main.scrollTop(clientY - main.offset().top);
    }
}

links.each(function(idx, linkEl) {
    var link = $(linkEl);
    link.bind("click", goToXlink(link));
    link.hide();
});

main.bind("scroll", function() {
    var scrollY = main.scrollTop() + main.offset().top;
    links.each(function(idx, link) {
        setXlinkActive($(link), scrollY);
    });
});