44

I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  position: sticky;
  top: 0;
  left: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
totalnoob
  • 2,521
  • 8
  • 35
  • 69
  • your sidebar and the navigation bar have to be fixed while the body content must be a normal scrolling div, at least that's what i think you should so to achieve the layout you're going for – Dev Man Jun 11 '18 at 09:48
  • nice, exactly my situation – pery mimon Feb 13 '19 at 12:43

3 Answers3

44

the problem you are facing here is, that your section block consumes the full height. so it won't stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped your 'hi' inside a div.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
}

section div {
  position: sticky;
  top: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
<main>
  <nav></nav>
  <section>
    <div>
      <p>one</p>
    </div>
  </section>
  <article>
    <p>two</p>
  </article>
</main>
Jon Winstanley
  • 23,010
  • 22
  • 73
  • 116
honk31
  • 3,895
  • 3
  • 31
  • 30
  • 2
    Note that if this isn't working, make sure you don't have a parent element with overflow: hidden. https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work – keslert May 24 '22 at 15:36
42

You need to use align-self: start on the thing you want to be sticky.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
  background: grey;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  position: sticky;
  top: 0;
  left: 0;
  align-self: start;
  
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>
James Trenda
  • 859
  • 7
  • 7
0

Update with complete code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  top: 0;
  left: 0;
}

.fixed-section {
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}
</style>
</head>
<body>

<main>
  <nav></nav>
  <section>
    <div class='fixed-section'>
        <a href="#">Hi 1</a>
    <div>
  </section>
  <article>
    <p>hi</p>
  </article>
</main>
   
</body>
</html>
JPC
  • 1
  • 2