12

I want to fix an element to the top and left of the screen using position sticky when scrolling a large div either vertically or horizontally. Fixing to the top is working fine, but fixing to the left is not. This is my html page:

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

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div>
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>

I also tried using either top or left alone, with the same result. I must be missing something.

Why is the top position fixed, but not the left position? How should I fix the page to get the desired behaviour?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Erik Vorstenbosch
  • 135
  • 1
  • 1
  • 6

2 Answers2

15

The sticky element is a block level element inside another block level so this one is already taking 100% width if its parent element and there is no room for a left sticky behavior.

Add some border to better see:

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div style="border:2px solid red;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>

The green box can only stick inside the red one and the lightblue element is overflowing. Addinline-block to sticky element (to remove the width 100% constraint) and to the parent element (so it grows with the lightblue element) and you will have the expected result

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
  display:inline-block
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}
<div style="border:2px solid red;display:inline-block;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This answer helped me check my parent element. In my case, the parent had a `display: flex` with `flex-direction: column` so I had to align the particular child element to the position I wanted using `align-self: end`. Thanks – BrunoElo Dec 04 '21 at 06:01
-3

Erit Vortstenbosch Welcome to the community. I have checked your code its working fine. Just set margin and padding to 0 for h1 tag. Here is the modified code snippet.

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

.scroll-horizontally-and-vertically {
  width: 4000px; 
  height: 2000px; 
  background-color: lightblue;
}

h1 {
  padding: 0;
  margin: 0;
}
<div>
  <div class="sticky">
  <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>
G_real
  • 1,137
  • 1
  • 18
  • 28
Zohaib Tariq
  • 548
  • 8
  • 15
  • @ZohaibTariq. Thanks for checking my code. Unfortunately, the padding/margin fix did not help. When scrolling horizontally, the h1 still scrolls out of the window. – Erik Vorstenbosch Aug 11 '19 at 19:21
  • @ErikVorstenbosch Your welcome. I don't know why it's not working I've tried the same code and its works for me. here is [gif](https://imgur.com/3uZhaRV) – Zohaib Tariq Aug 11 '19 at 19:43