Reduce opacity of background image on scroll, restrain min opacity-CodePudding

I am trying to have a background image reduce the opacity on scroll, down to a minimum of 0.5 once off the landing page using vanilla javascript. I tried adding a Math.max() within the scroll function to only have it drop to 0.5, but it causes the image to remain at 0.5 for all pages.

I would like the landing page to always have opacity=1, with all other pages at 0.5. I was able to do the scrolling animation, but need it to stop at 0.5.

const landingHeight = document.getElementById("section-landing").offsetHeight;
window.onscroll = function() {
 const opcFilter = (window.pageYOffset/ landingHeight);
  document.body.style.background = "linear-gradient(rgba(255, 255, 255, "   opcFilter   "), rgba(255, 255, 255, "   opcFilter   ")), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat";
}

body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center top !important;
}

nav{
    width: 100%;
    background: #C1C8D0;
    overflow:hidden;
    position: fixed;
    top:0;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

li{
    float: right;
}

a{
    padding: 5px;
    width: 130px;
    display: block;
    text-align: center;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

div{
    height: 1000px;
    overflow: scroll;
}

<body>
        <nav>
            <ul>
                <li><a href="#section-page2">Page 2</a></li>
                <li><a href="#section-page1">Page 1</a></li>
                <li><a href="#section-landing">Landing Page</a></li>
            </ul>
        </nav>
        
        <div  id="section-landing">
            <h1 >Landing Page</h1>
            <p>
              The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
            </p>
        </div>
        <div  id="section-page1">
            <h1>Page 1</h1>
            <p>
            Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
            </p>
        </div>
        <div  id="section-page2">
            <h1>Page 2</h1>
            <p>
            Another page of opacity 0.5
            </p>
        </div>
</body>

CodePudding user response：

You need to add Math.min not Math.max like so : (I also added a window.onload for this to run in the snippets but it's not mandatory if your script loading is defered)

window.onload = () => {
  const landingHeight = document.getElementById("section-landing").offsetHeight;
  window.onscroll = () => {
    const opcFilter = Math.min(0.5, window.pageYOffset / landingHeight);
    document.body.style.background = `linear-gradient(rgba(255, 255, 255, ${ opcFilter }), rgba(255, 255, 255, ${ opcFilter })), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg) no-repeat`;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg);
  background-repeat: no-repeat;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center top !important;
}

nav {
  width: 100%;
  background: #C1C8D0;
  overflow: hidden;
  position: fixed;
  top: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  float: right;
}

a {
  padding: 5px;
  width: 130px;
  display: block;
  text-align: center;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

div {
  height: 1000px;
  overflow: scroll;
}

<body>
  <nav>
    <ul>
      <li><a href="#section-page2">Page 2</a></li>
      <li><a href="#section-page1">Page 1</a></li>
      <li><a href="#section-landing">Landing Page</a></li>
    </ul>
  </nav>

  <div  id="section-landing">
    <h1 >Landing Page</h1>
    <p>
      The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
    </p>
  </div>
  <div  id="section-page1">
    <h1>Page 1</h1>
    <p>
      Opacity is now have 0.5 and will stay there for the remaining pages. Scrolling back up to the landing page will set opacity to 1.
    </p>
  </div>
  <div  id="section-page2">
    <h1>Page 2</h1>
    <p>
      Another page of opacity 0.5
    </p>
  </div>
</body>