滚动时如何使元素粘在顶部

Question

I am creating a page I need help with, I have the HTML and CSS ready, all I want is to make the element come to the top after I scroll down a bit, and there have to be more than 5 screens than I need to come to top as I keep scrolling

I can't find a solution so need help

Here's a link of what I need, this is exactly what I want https://www.blackrock.com/corporate#intro

Answer 1

CSS

The CSS property you need is position: sticky means that this element would be in it's respective relative position until you scroll down enough and it reached the top (if you set its top: 0 ) and would then "stick" to the top as if it instantly changed it's position to position: fixed . Enjoy

The following code could help you achieve your desired behavior:

.sticky-container {
   position: sticky;
   top: 0;
   left: 0;
}

If it is a container that takes up the entire width then also add width: 100% and a certain fixed height in pixels to see the container.

If you want to have the element stay in a certain position in default when the user just entered the website you probably would need position: fixed instead of sticky. You could take a look at a similar solution for position fixed here with a demo