Last row of left column to be sticky on scroll

HTML & CSS
1

How do I get the left section that says “Summary” to be sticky on top when scrolled below.

2

In the second line of HTML: delete “items-start”.

Add CSS:

.sticky{
  position: sticky;
  top: 0;
}
2 Likes
3

Thanks so much for the delete of items-start - but I don’t get why that blocked sticky from being sticky.

4

With the items-start class added the two columns are only as tall as their content. That would be exactly the way you would make the whole left column sticky as it will be sticky within its parent that holds both columns.

However you want the second item in the left column to be sticky which means it has to be sticky within that column (it can only be sticky in its current context). If the column is only as tall as its content then it can never be sticky. Removing the items-start makes both those columns the same height therefore the second item now has room to be sticky within that column.

If that doesn’t make sense then add a background color to the left column and see the difference in height when you remove the items-start class.

Items are sticky within their current context only.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.