JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
        
        <div class="items">
            dfjdslkfjdls;ajfdls;jkfa;fd;lsjfl;dsasjfl;akjf

        <div class="prev button">prev</div>
        <div class="next button">next</div>
    </div>

CSS

.wrapper{
    position:relative;
    border:1px solid red;
    
}
.content{
    border:1px solid red;
    width:1000px;
    margin:10px auto;
    position:relative;
    
}
.items{
    border:1px solid red;
    width:800px;
    margin:50px auto;
    position:relative;
    height:1500px;
    line-height:1500px;
    text-align:center;
}
.button{
	top:50%;
	cursor:pointer;
	position:absolute;
    height:30px;
    background-color:red;
    width:30px;
    color:#fff;
}
.prev{left:-4px;}

.next{right:-4px;}
.fixed{
    position:fixed;
}

JavaScript

$(window).scroll(function(){
    if ($(window).scrollTop() > 50){
        $(".button").css("top", $(window).scrollTop() - 150 + "px");
    } else {
        $(".button").css("top", "0px");
    }
});