Solution 1 :

If you set both top and left:

body {
  width: 1000vw;
  height: 1000vh;

.test {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 1.00);
  background-image: url("");
  border-radius: 50%;
  position: sticky;
<div class="test"></div>

Problem :

I am currently doing a project in which I want certain columns of a table to sticky so they are always visible when you scroll horizontally, however a request has been made for the table headings to also be sticky when you scroll past them vertically.

I have managed to create the horizontal sticky effect on this table. I have managed to create the vertical sticky effect on all other table headers, however I can’t seem to get my table headings to sticky both horizontally and vertically. I did some searching but couldn’t find anything on it (probably because sticking something horizontally isn’t very commonplace).


Comment posted by Théo Benoit

Could you provide us code please.


Leave a Reply

Your email address will not be published. Required fields are marked *