Changing opacity when scrolling

Question

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> 

Answer 1

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> 

Answer 2

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.com/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> 

Answer 3

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

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

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

Answer 4

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;
            }
        }
);