javascript - Changing opacity when scrolling - Stack Overflow

admin管理员组

文章数量:1290938

My goal is to change the opacity of a DIV when I scroll down. It's important that the transition is smooth!

• When the scrollTop of the body is 400, the opacity of the Test-div should be 1.
• When the scrollTop of the body is 800, the opacity of the Test-div should be 0.

This is what I currently have, but it doesn't work.

window.addEventListener('scroll', function() {
    if (document.body.scrollTop > 400) {
      var currScrollPos2 = document.body.scrollTop;
      document.getElementById('test').style.opacity = -currScrollPos2 / 400 + 2;
    }
  }
};

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  width: 100%;
}

#test {
  width: 200px;
  height: 200px;
  background-color: red;
  position: fixed;
}

<div id="test"></div>

My goal is to change the opacity of a DIV when I scroll down. It's important that the transition is smooth!

• When the scrollTop of the body is 400, the opacity of the Test-div should be 1.
• When the scrollTop of the body is 800, the opacity of the Test-div should be 0.

This is what I currently have, but it doesn't work.

window.addEventListener('scroll', function() {
    if (document.body.scrollTop > 400) {
      var currScrollPos2 = document.body.scrollTop;
      document.getElementById('test').style.opacity = -currScrollPos2 / 400 + 2;
    }
  }
};

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  width: 100%;
}

#test {
  width: 200px;
  height: 200px;
  background-color: red;
  position: fixed;
}

<div id="test"></div>

• javascript
• css

Share Improve this question Follow edited Apr 23, 2017 at 10:36 Just a student 11.1k22 gold badges4444 silver badges7171 bronze badges asked Apr 23, 2017 at 10:14 SoccerlifeSoccerlife 75133 gold badges1212 silver badges2222 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You are close, but the body.scrollTop property does not work in all browsers.

I took the liberty of cleaning up your markup and code a little bit. You were missing a closing parenthesis at the end of you JavaScript, for example. There were also some superfluous rules in your CSS markup, that I deleted.

var test = document.getElementById('test');
window.addEventListener('scroll', function(e) {
  // http://stackoverflow./a/28633515/962603
  var scroll = window.pageYOffset || document.documentElement.scrollTop ||
                document.body.scrollTop || 0;
  test.style.opacity = Math.max(0, Math.min(1, -scroll / 400 + 2));
});

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
}

#test {
  position: fixed;
  width: 200px;
  height: 200px;
  background-color: red;
}

<div id="test"></div>

I had to replace document.body.scrollTop with window.pageYOffset to make it work.
See: document.body.scrollTop Firefox returns 0.

window.addEventListener('scroll', function() {
    var currScrollPos2 = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (currScrollPos2 > 400) {
      document.getElementById('test').style.opacity = -currScrollPos2 / 400 + 2;
    }
  }
);

* {
  margin: 0;
  padding: 0;
}

body {
  height: 2000px;
  width: 100%;
}

#test {
  width: 200px;
  height: 200px;
  background-color: red;
  position: fixed;
}

<div id="test"></div>

Just syntax error. Replace '}' by ')' at the end of your JS code. Btw, I remend using document.addEventListener instead of window.addEventListener

Here is correct code: https://jsfiddle/ye082ae9/

document.addEventListener('scroll', function(e) {
            if (document.body.scrollTop > 400) {
                var currScrollPos2 = document.body.scrollTop;
                document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
                }
            });

Your code works fine, there is one little spelling error at the end. Just change }; to );

window.addEventListener('scroll', function() {
        if (document.body.scrollTop > 400) {
            var currScrollPos2 = document.body.scrollTop;
            document.getElementById('test').style.opacity = -currScrollPos2/400 + 2;
            }
        }
);

本文标签： javascriptChanging opacity when scrollingStack Overflow