Попытка заставить навигационную панель изменить цвет фона после прокрутки на определенное расстояние

Question

Попытка заставить панель навигации изменить цвет фона после прокрутки на определенное расстояние, чтобы панель навигации становилась темнее при достижении белой части сайта. Я обрисовал в общих чертах, что я сделал ниже.

Сайт https://phoenixim.com/TestSite21/

Я добавил это 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>

Поскольку я хочу, чтобы фон был полупрозрачным для запуска, я использую «background-color = rgba» с низкой непрозрачностью, и после того, как кто-то прокрутит 280 пикселей, я хочу, чтобы прозрачность была от go до .9.

Поскольку я использую Id для вызова изменения, я добавил # navbar-custom с непрозрачностью 0,1

Вот навигационная панель css в таблице стилей css:

/* 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;}

Вот это 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

Использование:

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>