Kevin Powell - Community•11mo ago

Make just an child-element sticky

I want just to have the time on the left side sticky, not the whole element (like in the second video). Is there an easy solution without "doubling" the list and make the left / right element hidden? the list elements are currently written in flex like

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
 display: flex;
}

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
 display: flex;
}

13 Replies

Mannix•11mo ago

I assume the Starting time has position sticky?? and it doesn't work? Since you use flexbox on the entry to put them side by side try adding align-self: start; to the Starting time.

bibamannOP•11mo ago

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
  position: sticky;
  top: 100px;  
display: flex;
}

<div class="entry">
  <div>Starting Time</div>
  <div>Sessions</div>
</div>

.entry {
  position: sticky;
  top: 100px;  
display: flex;
}

is the 2nd video. putting sticky on the div with "starting time" is basically the first one - nothing happens

Mannix•11mo ago

sticky should be on the starting time div not the entry

bibamannOP•11mo ago

yes and there nothing happens I can do a jsfiddle on it if it helps

Mannix•11mo ago

did you added align-self: start; there too as i said? it will help tremendously 🙂

bibamannOP•11mo ago

... thx I don't understand it, but it works.

Mannix•11mo ago

by default the children are streaching so they have equal height 🙂 so there is no room for sticky to work you could also use align-items: start on the parent by default it's set to stretch

bibamannOP•11mo ago

🙂