Change CSS after ammount of scrolling

Question

I want to overwrite the CSS code after scrolling 800px and revert if less than 800. I have this code:

Javascript:

$(window).scroll(function() {
    if ($(window).scrollTop() >= 800) {
        $('#nav').css('background', 'rgba(0, 0, 0, 0)');
    } else {
        $('#nav').attr('background', 'rgba(0, 0, 0, 0.8)');
    }
});

Answer 1

Try the following:

$(window).scroll(function () {
    if ($(window).scrollTop() >= 100) {
        $('#nav').css('background-color', 'rgba(0,0,0,0)');
    } else {
        $('#nav').css('background-color', '');
    }
});

You were using background instead of background-color. You can replace the second property of the else statement with whatever you want it to revert to. The above example will default back to whatever is in the stylesheet.

Here's a working example on JSFiddle: https://jsfiddle.net/tz245uky/3/