JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<h1>Sample</h1>
<ul>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><!---->
</ul>

CSS

body {
    padding-bottom: 580px;
}
ul {
    padding-left: 200px;
}
h1 {
    font-family: "Lucida Grande";
    font-weight: bold;
    font-size: 4em;
    position: fixed;
    /*height: 1000px;
    /*background-image: none;*/
    /*background-color: black;*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    /*background-position: left bottom;*/
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 240px;
}

li {
    background: gray;
    display: block;
    height: 100px;
}
li:nth-child(1) { background: red; }
li:nth-child(2) { background: green; }
li:nth-child(3) { background: yellow; }
li:nth-child(4) { background: pink; }
li:nth-child(5) { background: blue; }
li:nth-child(6) { background: silver; }
li:nth-child(7) { background: gold; }

JavaScript

var bg = "-webkit-linear-gradient(top,";

$("ul li").each(function() {
    var c = $(this).css("background-color");
    var o = $(this).offset().top - 10;
    var h = $(this).outerHeight();
    bg += c + " " + o + "px," + c + " " + (h+o) + "px,";
});

bg += "black 100%)";


$("h1").css({"background-image": bg, "background-repeat": "no-repeat", height: $("ul:first").outerHeight()});



$(window).scroll(function() {
    $("h1").css("background-position", "left " + (-window.pageYOffset) + "px");
    //console.log(window.pageYOffset);
});
$("h1").click(function(){
console.log($("h1").css("background-position"));
});
//console.log(bg);

//alert(bg);