JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul class="list">
            <li>Пункт 1</li>
            <li>Пункт 2</li>
            <li>Пункт 3</li>
            <li id="expand">Пункт 4</li>
            <li>Пункт 5</li>
        </ul>
    </body>
</html>

CSS

body {
    background: url(http://gallery.nen.gov.uk/assets/0801/0000/0312/bridge.jpg) fixed;
    color: #fff;
    font-weight: bold;
}

.list {
    width: 200px;
}

#expand {
    position: relative;   
}

#inner {
     position: absolute;
    left: 100px;
    top: 0;
   display: none; 
    background: url(http://gallery.nen.gov.uk/assets/0801/0000/0312/bridge.jpg) fixed;
    border: 2px solid #fff;
}

#expand:hover > #inner {
    display: block;
    
}

JavaScript

var n = prompt('Сколько нужно пунктов?', 5),
    expand = $('#expand')
    inner = $('<ul id="inner"></ul>');
n = parseInt(n);
inner.appendTo(expand);
for (var i = 0; i < n; i++) {
    $('<li>Пункт' + (i + 1) + '</li>').appendTo(inner);
}

$(window).scroll(function() {
    var scT = $(this).scrollTop();
    console.log(scT)
    $('body').css({'background-position' : '0 ' + (-scT) +  'px'});
    $('#inner').css({'background-position' : '0 ' + (-scT) +  'px'});
});