Div going up, on scroll down-CodePudding

I am creating a single article page to show articles.What i wanted is to have a nice background (article image)and my article body,around midway of my page.When i scroll down though,i want the article body to go up. This is what i have done so far.I tried to play around with scrollY and what i'm essentially trying to do is subtract from my "top" attibute ,every time there is a scroll. F.e. my article body has top=100px,when i scroll down 20px,i want my "top" to be 100-20=80.

  const container = document.getElementById('article-container');
  
  window.addEventListener('scroll',()=>{
    console.log(scrollY)
      container.style.top= `${378-scrollY} px`
  })

  main{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .article-image{
    position: absolute;
    z-index: 0.9;
    min-height: 85vh;
    opacity: 0.9;
  }

  .article-container{
    width: 50%;
    position: relative;
    top: 35vh;
    z-index:1;
    background-color: white;
    min-height: 50vh;
    padding: 30px;
    color: #1A2434;
    -webkit-box-shadow: 0px 0px 15px 5px #1A2434 ; 
    box-shadow: 0px 0px 15px 5px #1A2434 ;
  }

  .article-container h1{
    font-size: 3rem;
  }

  .article-container .date{
    font-size: 0.8rem;
    padding-top: 4vh;
    font-family: 'Zona Pro Thin';
    color: rgba(0, 0, 0, 0.5);
  }

  .article-container .article-description{
    font-size: 1.2 rem;
    padding-top: 4vh;
    font-family: 'Zona Pro Thin';
    color:#1a2434d0;
    font-weight: bolder;
  }

<main>
  <img class='article-image' src="<%= article.image %>">
  <div  id="article-container">
    <h1>Article Title</h1>
    <div >
      21/6/2022
    </div> 
    <div >
      Article Description
    </div>
  </div>
</main>

CodePudding user response：

No need to JS, You can make a div as background and set it's height:100vh; overflow-y: overlay|scroll; and background: url('your photo') no-repeat center fixed;. Then create another div for holding your articles and add margin-top:50vh; to it, and ... there you go :)

body {
  margin: 0;
  overflow: hidden;
}

main {
  display: flex;
  flex-direction: column;
  /* set your picture's link here */
  background: url("https://source.unsplash.com/iuyR_HEwk24/1600x900") no-repeat center fixed;
  background-size: cover;
  height: 100vh;
  overflow-y: overlay;
}

.articles {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 50vh;
}

.article-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px;
  width: 45vw;
  padding: 30px;
  color: #1a2434;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 15px;
}

.article-container:last-child {
  margin-bottom: 30px;
}

<main>
  <div >
    <div  id="article-container">
      <h1>Article Title</h1>
      <div >21/6/2022</div>
      <div >Article Description</div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently withdesktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy textever since the 1500s, when anunknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Itwas popularised in the 1960s with therelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy textof the printing and typesetting industry. LoremIpsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not onlyfive centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishingsoftware like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div  id="article-container">
      <h1>Article Title</h1>
      <div >21/6/2022</div>
      <div >Article Description</div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a typespecimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,</p>
    </div>
  </div>
</main>