Question

我正在使用Local by Flywheel在本地开发站点。我正在尝试使导航栏从透明滚动到彩色。我已经尝试了以下方法，但是它不起作用。我检查了控制台，它没有显示任何错误。这是我的导航栏HTML

<body data-spy="scroll" data-offset="100" data-target="#navbarResponsive">
      <div id="home">
   <!-- Home/Header Navigation Section -->
    <nav class="navbar bg-light navbar-light  navbar-expand-md fixed-top" >
        <div class="container">
            <a href="#" class="navbar-brand">
                <img src="/img/logo.png" class="img-fluid logo" alt="Seacoast Web Development" title="Seacoast Web Development">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">

并且我正在使用此javascipt添加“滚动”类

<script>
$(function () {
                var header = $(".navbar");

                $(window).scroll(function () {
                    var scroll = $(window).scrollTop();
                    if (scroll >= 50) {
                        header.addClass("scrolled");
                    } else {
                        header.removeClass("scrolled");
                    }
                });
            });
</script>

这是导航栏和“滚动”类的css

.navbar{
    background: transparent!important;
    transition:500ms ease;
}
.scrolled {
  background: rgba(247, 245, 245, 0.7)!important;
  transition: background-color 1s ease 0s;
}

Answer 1

问题出在我身上

height: 100%; width: 100%; in the <body> tag

我不知道为什么会影响它，但是当我删除它时，菜单在滚动时会更改颜色。谁能解释？

更改滚动条上的导航栏背景颜色不起作用

1 个答案: