Utilizing Bootstrap, I aim to keep the top-right corner of the red background fixed to the upper right corner of the blue section within the visible area regardless of window resizing due to its responsive design.
The red element should be position fixed so it remains stationary while scrolling, always staying on the top-right side of the visible blue background.
An illustration of the desired outcome: https://i.sstatic.net/WKInA.png Even when scrolling (visualized using Windows Paint)
https://i.sstatic.net/Ste7F.png
To see the implementation, visit the link or refer to the code snippet below:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.left {
background-color: blue;
width: 100%;
height: 4000px;
}
.right {
background-color: red;
width: 100%;
position: fixed;
right: 18%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-11 left">left
</div>
<div class="col-1 right">right
</div>
</div>
</div>