Pick height of CSS position:sticky - css

Question

I have made an element sticky but I don't arrive in defining the area in which the elements should stay sticky. The current area was not picked by me but was defined automatically when I applied the position:sticky. Obviously I want full control over the space my sticky elements uses as active area, and I want to pick precisely where the element must stop during the scrolling.
The element uses roughly 50% of it's space where it's supposed to stay sticky.
Here is the url in question: https://www.varamedia.be/website-laten-maken/restaurants/
I get my inspiration from the google marketing platform sales page. Here you see the same kind of behaviour I'm trying to replicate: https://marketingplatform.google.com/about/enterprise/
Probably I'm missing something here... Thanks a lot for any kind of help.
I read through SO but did not find a proper answer to this question, hence the new thread.
Here is the custom CSS I added in my WP child theme style.css file:
.stickyimage{
width:100%;
background:orangered;
height:0px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
body {
direction: ltr;
color: #a1a1a1;
background-color: #FFFFFF;
line-height: 24px;
background-repeat: repeat;
background-attachment: fixed;
overflow-x: visible;
overflow-y: visible;
background-position: 0 0;
letter-spacing: 0.01em;
word-spacing: 0.01em;
}

Answer 1

If you are still struggling with this, I inspected your web page and may have found the problem.
The problem lies in the parent container of #sidebar, its position: relative causes the unexpected behavior.
To fix this you can overwrite its CSS. To target the parent div of #sidebar you can simply do:
div > #sidebar {
position: static;
}
The code above targets div elements which have a #sidebar element as child. You can change its position to anything but absolute, relative, sticky or fixed. More information on CSS positioning here.
The key takeaway here is if you want to dynamically position an element, make sure its parent is statically positioned to avoid unexpected behavior.