Keep div position fixed only in one direction on mobile

0
votes

I work on one interface where I want to use one top and one sidebar div fixed, but only for one direction.

For some reason in my case CSS position:sticky not working on mobile, and I try the JS solution to keep the divs position onscroll, and this works perfectly on Desktop.

For the last two days I trying how to implement an ontouchmove event for mobile devices, but unfortunately without success.

If someone can help me with these two divs to keep their positions on mobile when users touch and move/scroll?

window.onscroll = DoScroll;
        function DoScroll() {
            var mydiv = document.getElementById("vertical");
            mydiv.style.top = -window.pageYOffset + 'px';

            var mydiv = document.getElementById("horizontal");
            mydiv.style.left = -window.pageXOffset + 'px';
        }
body {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .horizontal {
            width: 16000px;
            height: 25px;
            margin-left: 190px;
            background-color: red;
            color: white;
            position: fixed;
            z-index: 1;
            padding: 15px;
        }

        .vertical {
            width: 150px;
            height: 16000px;
            background-color: blue;
            color: white;
            position: fixed;
            z-index: 1000;
            padding: 20px;
        }
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keep Div Position</title>    
</head>

<body>

<div class="horizontal" id="horizontal">Horizontal</div>

<div class="vertical" id="vertical">Vertical</div>   

<div style="width: 16000px;height: 16000px;">&nbsp;</div>
</body>
</html>
mobilesticky