JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='wrapper'>
    <div id='fixed_top'>
        <div id='banner'>BANNER
            <div id='scrollValues'></div>
        </div>
        <div id='toolbar'>TOOLBAR
            <button id='reset'>Reset Scroll</button>
            <button id='read'>Read Scrolls</button>
        </div>
    </div>
    <div id='canvas'>CANVAS
        <div id='box1'></div>
        <div id='box2'></div>
    </div>
</div>

CSS

body {
    margin-top:0;
}
div#wrapper {
    font-family:arial;
    width:400px;

    position:absolute;
}
div#fixed_top {
    position:fixed;
    width:400px;
    z-index:20;
}
div#banner {
    height:60px;
    background-color:yellow;
    width:100%;
}
div#toolbar {
    background-color:silver;
    height:30px;
}
div#canvas {
    background-color:beige;
    height:600px;
    width:400px;
    position: absolute;
    top:90px;
}
div#box1 {
    width:200px;
    height:80px;
    border:1px black solid;
    margin-top:30px;
    margin-left:40px;
    background-color:orange;
}

div#box2 {
    width:200px;
    height:80px;
    border:1px black solid;
    margin-top:40px;
    margin-left:130px;
    background-color:orange;
}
div#scrollValues {
    font-size:10px;
    margin:0;
    width:400px;
    height:50px;
}

JavaScript

$(function() {        // ready
    $('button#read').click(function() {
        var doc_scrollTop=$(document).scrollTop();
        var body_scrollTop = $('body').scrollTop();
		var wrapper_scrollTop = $('#wrapper').scrollTop();
		var canvas_scrollTop = $('#canvas').scrollTop();
		$('#scrollValues').html(' document scrollTop = '+doc_scrollTop +
                                ' body scrollTop='+ body_scrollTop +
								' wrapper scrollTop='+wrapper_scrollTop +
							    ' canvas scrollTop='+canvas_scrollTop);
							   
    });
    
        $('button#reset').click(function() {
            $(document).scrollTop(0);
        });
});