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("https://i.postimg.cc/Jz7MbMJ3/cat-1361649-639x426.jpg");
  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).

Comments

Comment posted by Théo Benoit

Could you provide us code please.

By

Leave a Reply

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