Scroll Position

by Soviut

HTML

<div id="label">0</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body {
    font-family: arial, helvetica, sans-serif;
}

#label {
    position: fixed;
    padding: 5px 10px;
    margin: 5px;
    
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

ul {
    display: block;
    padding: 0;

    list-style: none outside;
}

li {
    display: block;
    height: 350px;
}

li:nth-child(even) {
    background: #99CCFF;
}

li:nth-child(odd) {
    background: #6699CC;
}

JavaScript

$(function() {
    var doc = $(document);
    var label = $('#label');
    
    doc.on("scroll touchmove", function() {
        label.text(doc.scrollTop());
    });
});