时间戳

首页 > 解决方案 > 滚动一定距离后尝试使导航栏更改其背景颜色

javascript - 滚动一定距离后尝试使导航栏更改其背景颜色

问题描述

尝试让导航栏在滚动一定距离后更改其背景颜色，以便导航栏在到达网站的白色部分时变得更暗。我在下面概述了我所做的事情。

网站是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 像素后，我希望透明度上升到 0.9。

因为我使用 Id 来调用更改，所以我添加了一个不透明度为 0.1 的 #navbar-custom

这是 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 ========== -->

标签： javascriptcss

解决方案

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

推荐阅读