JSFiddle - React, Tailwind, and code Playground

by Tyler N.

HTML

<div>Value is now <span class="inside">0</span>. And it should change on window.scroll Updated value is <span class="outside"></span> and should be the exact same as first value. First value is inside scroll event, second it outside. I want them to match.</div>

CSS

div {
    height: 1200px;
    padding-top: 150px;
}

span {
    font-size: 24px;
    color: red;
}

JavaScript

$(function() {

    var myVar = $('body').scrollTop();

    $(window).scroll(function() {
        myVar = $('body').scrollTop();
        $('.inside').text(myVar);
    });

    $('.outside').text(myVar);

    // I was thinking that assigning and tracking the value for use outside of the scroll event would be less demanding. Yes? Or does it matter?


});