0

I posted a question here that was answered and worked for me at the time. I had to re-write my code with flex box and now the overlay scrolling doesn't work. I tried adding position:sticky; to the behind div that fixed it in the first question I posted, but doesn't work for my current code. Using my current code, how can I get the overlay scrolling to work again? What am I missing?

Edit: using only css and html, is it possible to scroll away the front div (overlay div ontop of the image) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the front div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ .

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 100%;
}

#front {
  background-color: pink;
  height: 91%;
  display: flex;
  position: relative;
  z-index: 2;
}

#left {
  width: 50%;
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

#left>* {
  flex: 1;
}

#leftnav {
  height: 8%;
  width: 100%;
  background-color: green;
  display: flex;
}

#logotext {
  display: flex;
}

#right {
  width: 50%;
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

#right>* {
  flex: 1;
}

#logo {
  width: 100%;
  max-width: calc(80vh - 25px);
  background-color: blue;
}

#logo:before {
  content: "";
  display: flex;
  padding-top: 100%;
}

#llogo {
  width: 100%;
  max-width: calc(80vh - 25px);
  background-color: lightblue;
  margin: 0;
}

#llogo:before {
  content: "";
  display: flex;
  padding-top: 100%;
}

#rightsidetop {
  background-color: lightgrey;
}

#leftsidetop {
  background-color: lightgrey;
}

ul {
  display: flex;
  text-align: center;
  justify-content: space-between;
  width: 85%;
  text-decoration: none;
}

li {
  display: block;
  font-size: 17px;
  text-decoration: none;
}

#rightsideright {
  background-color: lightgreen;
  flex: 1;
}

#leftsideright {
  background-color: lightgreen;
  flex: 1;
}

#rightsidebottom {
  background-color: pink;
}

#leftsidebottom {
  background-color: pink;
}

.wrapper {
  display: flex;
}

.video {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100%;
  margin-top: -100%;
  position: sticky;
  top: 0;
}
<div id="container">
  <div id="front">
    <div id="left">
      <div id="leftsidetop">
        <p>logo</p>
      </div>
      <div class="wrapper">
        <div id="leftsideright"></div>
        <div id="llogo"></div>
      </div>
      <div id="leftsidebottom"></div>
    </div>
    <div id="right">
      <div id="rightsidetop">
        <ul>
          <li><a href="#home">About</a></li>
          <li><a href="#news">Services</a></li>
          <li><a href="#contact">Clients</a></li>
          <li><a href="#about">Contact</a></li>
        </ul>
      </div>
      <div class="wrapper">
        <div id="logo"></div>
        <div id="rightsideright"></div>
      </div>
      <div id="rightsidebottom"></div>
    </div>
  </div>
</div>
<div class="video"></div>

<div style="height:150vh"> more content later </div>
Cameron Cole
  • 410
  • 1
  • 4
  • 20
  • Can you update your question here to contain the relevant information from your previous question? Asking us to go to the other question to fill in the gaps is a big ask. Also, looking at your code here - you have the `video` element as `sticky`, yet its height is `100%`. Not sure what you are exactly expecting to happen. – disinfor Jan 09 '21 at 22:02
  • 1
    Pay attention to the `vh` units and the html structure in the answer provided to your first question. You need another container which goes around `#container` and `.video`, something like `#sticky-container`, with a height of `200vh`. Make sure those two divs which it encloses are using `vh` and your code works. – lawrence-witt Jan 09 '21 at 22:04
  • @disinfor just did, sorry about that. Didn't want my question to be taken down for being too similar. – Cameron Cole Jan 09 '21 at 23:26
  • @lawrence-witt ahh youre correct. Thanks a lot. You can post your response so I can accept as correct if you'd like. – Cameron Cole Jan 09 '21 at 23:33

1 Answers1

-2

just add to element you want to be scrollable an overflow: auto;

e.g :

#right {
  overflow: auto;
}
Fatwa Anugerah
  • 22
  • 2