0

I have recently started to explore sticky positioning. I am trying to get an image to stick to the top of the screen once it reaches the top of the page. Similar to this example. Note: Doing this in chrome.

Anyway, having implemented the code below, it is not working. It is simply staying at its original position at the top of the section as you scroll. I have tried not using a css-grid and changing the sizes around but this has not worked either. I feel like im doing something very basic wrong.

CSS

.offices-section {
  display: grid;
  grid-template-columns: 40% 60%;

  &__photos {
    height: 300vh;

    &--one {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
}

  &__content{
    height: 300vh;
  }
}

HTML

<section className="offices-section">
  <div className="offices-section__photos">
    <img src={officeOne} className="offices-section__photos--one" alt="office one" />
  </div>
  <div className="offices-section__content"></div>
</section>

Note: Im using React, so technically above is JSX. Thanks for any help in advance.

Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Ryan Turnbull
  • 3,766
  • 1
  • 25
  • 35

1 Answers1

2

Try to add some margin-top to the image.

Stack Snippet

.offices-section {
  display: grid;
  grid-template-columns: 40% 60%;
}

.offices-section .photos {
  margin-top: 200px;
  height: 300vh;
}

.offices-section .photos .one {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.offices-section .content {
  height: 300vh;
}

body {
  margin: 0;
}
<section class="offices-section">
  <div class="photos">
    <img src=http://via.placeholder.com/350x150 class="one" alt="office one" />
  </div>
  <div class="offices-section__content">
  </div>
</section>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • turns out it wasn't working due to my parent container having `overflow: hidden`. Why is that? Ill accept your answer – Ryan Turnbull Jan 25 '18 at 07:38
  • @RyanTurnbull see this https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working – Bhuwan Jan 25 '18 at 07:58