简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Lower opacity of scroll background image, limit minimum opacity

I'm trying to make the background image reduce the opacity on scroll and once away from the landing page, using vanilla javascript to lower it to a minimum of 0.5. I tried adding Math.max() in the scroll function to only drop it to 0.5, but it causes the image to stay at 0.5 for all pages.

I want the landing page to always have an opacity of 1, and all other pages to have an opacity of 0.5. I am able to animate the scroll 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 class="section" id="section-landing">
            <h1 class="title ">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 class="section" 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 class="section" id="section-page2">
            <h1>Page 2</h1>
            <p>
            Another page of opacity 0.5
            </p>
        </div>
</body>

P粉166675898P粉166675898219 days ago1406

reply all(1)I'll reply

  • P粉558478150

    P粉5584781502024-04-05 12:56:14

    You need to add Math.min instead of Math.max like this: (I also added a window.onload to run in the snippet, but it's not mandatory if your script load 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;
}
    
  

  
    
    
    Landing Page
    
    
    
      The background image here will have an opacity of 1. As we scroll to the next page, the opacity will transition to 0.5.
    
    
  
    
  
    
    
    Page 1
    
    
    
      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.
    
    
  
    
  
    
    
    Page 2
    
    
    
      Another page of opacity 0.5

    reply
    0
  • Cancelreply