Trying to make a navbar change its background color after scrolling a certain distance

Question

Trying to make a navbar change its background color after scrolling a certain distance so the navbar becomes darker as it reaches the white part of the site. I've outline what I have done below.

Site is https://phoenixim.com/TestSite21/

I've added this JavaScript:

<script>
// When the user scrolls down 280px from the top of the document, change the background color
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 280 || document.documentElement.scrollTop > 280) {
document.getElementById("navbar-custom").style.background-color = "rgba(0, 0, 0, 0.9)";

} else {
document.getElementById("navbar-custom").style.background-color = "rgba(0, 0, 0, 0.1)";
}
}
</script>

Since I want to have the background semi-transparent to start I am using "background-color=rgba" set to a low opacity and after someone scrolls 280 px I want the transparency to go up to .9.

Since I am using Id to call the change I added a #navbar-custom with the opacity of 0.1

Here is the navbar css in the css style sheet:

/* Top Navigation ------------------------------------------------------------------------*/

.navbar-custom{ min-height:90px; margin:0; border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.2); -moz-box-shadow:0 0 5px rgba(0,0,0,0.2); box-shadow:0 0 5px rgba(0,0,0,0.2); }

#navbar-custom{ background-color:rgba(0, 0, 0, 0.1);  }

.navbar-custom .navbar-brand{ line-height:36px; padding-top:26px; padding-bottom:17px; height:70px; }
a.navbar-brand.text-logo { text-transform: capitalize; font-weight: 500; font-size:26px; color:#010101; letter-spacing: 0px; padding-bottom:0px;}
.navbar-brand.image-logo img{max-width:100%; height:auto;}

Here is the HTML:

<!-- ========== Navbar ========== -->
<div class="nav-wrapper">
<div class="navbar navbar-custom <?php echo $navbar_fixed_top ?>" role="navigation" id="navbar-custom">
    <div class="container">

        <!-- Logo -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><i class="fa fa-bars"></i></button>
            <?php get_template_part('parts/header', 'logo'); ?></br>

            <span class="site-description">A Digital Strategies Company</span>




        </div>
        <!-- /Logo -->

        <?php if ( has_nav_menu( 'header' ) ) :  ?>
        <!-- Navigation -->
        <?php wp_nav_menu( array(
                'theme_location'    => 'header',
                'depth'             => 3,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'menu_class'        => 'nav navbar-nav navbar-right menu-header',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker()
                )
            );
        ?>
        <!-- /Navigation -->
        <?php else: ?>

        <?php 
        /* $vega_wp_enable_demo = vega_wp_get_option('vega_wp_enable_demo');
        if($vega_wp_enable_demo == 'Y')  */
        vega_wp_example_nav_header(); 
        ?>

        <?php endif; ?>


    </div>
    <div class="clearfix"></div>
</div>
</div>
<!-- ========== /Navbar ========== --> 

Answer 1

Use:

window.onscroll = changeOpNavbar

function changeOpNavbar() {
    if(window.scrollY > 280){
        document.querySelector('#navbar-custom').style.background = 'rgba(0, 0, 0, 0.9)';
    }
    else{
        document.querySelector('#navbar-custom').style.background = 'rgba(0, 0, 0, 0.1)';
    }
}

Answer 2

// When the user scrolls down 280px from the top of the document, change the background color



function scrollFunction() {

  if (document.body.scrollTop > 280 || document.documentElement.scrollTop > 280) {
document.getElementById("myDiv").style.backgroundColor = "rgba(0, 0, 0, 0.9)";

} else {
document.getElementById("myDiv").style.backgroundColor = "rgba(0, 0, 0, 0.1)";
}
}

window.onscroll = function() {scrollFunction()};

div{
width:100%;
height:300vh;
}

<div id='myDiv'>


</div>