JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="container">
    <div class="items">
        <div class="prevbutton button"> prev </div>
        <div class="nextbutton button"> next  </div>
    </div>
</div>

CSS

.container{
    border:1px solid green;
    text-align:center;
    vertical-align:middle;
    padding:5px 0px;
}
.items{
    border:1px solid red;
    height:800px;
    position:relative;
    width:500px;
    margin:0 auto;
}
.prevbutton,.nextbutton{
	top:50%;
	cursor:pointer;
	position:absolute;
	background-color:#FF8000;
	font-size:25pt;
    border:1px solid red;
    width:80px;
    text-align:center;
}
.prevbutton{left:-88px;}

.nextbutton{right:-88px;}

JavaScript

$(window).bind('scroll', function () {
			if ($(window).scrollTop() > num) {
				$('.button').addClass('fixed');
			} else {
			$('.button').removeClass('fixed');
			}
		});