Sticky

You,Sat Jul 24 2021•web development css design

Cool side navigation effect

Side navigation sticky trick from the https://css-for-js.dev/ (opens in a new tab) course:

section h2 {
  position: sticky;
  top: 0;
}
 
section {
  display: flex;
  align-items: flex-start;
  padding: 8px 0px;
}
 
section p {
  flex: 1;
  margin-left: 32px;
}
 
section:last-of-type {
  margin-bottom: 100vh;
}

Section 1

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum scelerisque elit in convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum scelerisque elit in convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum scelerisque elit in convallis.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum scelerisque elit in convallis.