I'm using slick slider https://kenwheeler.github.io/slick/.
I thought position:fixed meant that the element would be fixed relative to the viewport. However in the example below, when I scroll vertically and when I scroll through the slider, my "fixed" element moves relative to the viewport.
Why does this happen? Is there a way to keep the element fixed relative to the viewport whilst still retaining it within the slider div?
jQuery(document).ready(function($) {
$('.slider').slick({
speed: 500,
slidesToShow: 3
});
});html, body {
background: #102131;
color: white;
}
.container {
padding-top:100px;
position: relative;
height: 4000px;
display: flex;
flex-direction: column;
align-items: center;
}
.fixed-object {
position:fixed;
left:vw/2;
top:0;
width:400px;
height:50px;
background-color:grey;
z-index:1000
}
.slick-slider {
background: #3a8999;
font-size: 20px;
text-align: center;
width: 90%;
height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">
<div class="slider" data-slick="{'arrows': true}">
<div style="border: 5px solid red;">Slide 1</div>
<div style="border: 5px solid red;">Slide 2
<div class="fixed-object">Why am i moving?</div>
</div>
<div style="border: 5px solid red;">Slide 3</div>
<div style="border: 5px solid red;">Slide 4</div>
<div style="border: 5px solid red;">Slide 5</div>
</div>
</div>