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).bind('scroll', function() {
    if ($(window).scrollTop() > 50) {
        $('.button').addClass('fixed');
    }
    else {
        $('.button').removeClass('fixed');
    }
});