JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="switch-slide-ctn js-switch-slide">
    <div class="ss-meter js-switch">
        <div class="ss-slide"></div>
    </div>
</div>

CSS

.switch-slide-ctn{
    position: relative;
    display: block;
    height: 200px;
    width: 400px;
    background: lime;
}
.ss-meter{
    position: absolute;
    display: block;
    height: inherit;
    width: inherit;
}
.ss-slide{
    position: absolute;
    display: block;
    height: inherit;
    width: inherit;
    background: #777;
}

JavaScript

function switchSlide(){
    var element = $(".js-switch");
    var timer;
    var options = {};
    options.posX = element.offset().left;
    options.posY = element.offset().top;
    
    element.on("mouseenter", function(){
        getMousePosition();
        
    });
    
    element.on("mouseleave", function(){
        clearInterval(timer);
    });
    
    function getMousePosition(){
        timer = setInterval(function(){
            var x = $(window).scrollLeft();
            var y = $(window).scrollTop();
            console.log(x+" "+y);
        }, 50);
    }
}

switchSlide();