Question

我在标题中遇到问题。目前标题有灰色背景。向下滚动时，标题变为透明：

[链接到网站] [1]

那是相反的。当页面一直向上时，菜单应该是透明的，当你开始向下滚动页面时，菜单应该是白色背景颜色。

我感觉它与.fixed-header #header类有关。我尝试添加以下代码，但这使文本透明，而不是背景。

/* Menubar background */
.fixed-header #header {
    background-color: rgba(1,1,1,0.0) !important;
    opacity: 0.5 !important; 
    background-color: transparent !important; 
      }

有人可以帮我解决这个问题吗？

Answer 1

您可以使用Jquery。当菜单位于页面顶部时，它可以具有默认的白色或任何您想要的颜色，但是当您开始向下滚动时，您可以告诉它将background-color更改为透明。

请参阅下面的示例。

＆＃13;

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 500) {
    $(".menu").addClass("transparent");
  } else {
    $(".menu").removeClass("transparent");
  }
});

＆＃13;

.menu {
  height: 100px;
  background-color: #000;
  position: fixed;
  top: 200;
  width: 100%;
}

.transparent {
  background-color: transparent;
}

.wrapper {
  height: 2000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="menu"></header>
<div class="wrapper"></div>

＆＃13;

Answer 2

试试这个：

.fixed-header #header {
    background-color: white !important;
}

编辑：你应该尝试jquery：

$(window).on("scroll", function(){

        if($(window).scrollTop() == 0){

        $(".fixed-header #header").css("background-color", "transparent");

        }

        else if ($(window).scrollTop() > 0){

        $(".fixed-header #header").css("background-color", "white");

        }

    });

我希望它有所帮助，问候。

Answer 3

删除

background-color: rgba(255, 255, 255, 0.97);

来自

.fixed-header #header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.97);
    z-index: 500;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Answer 4

试试这个

/* Menubar background */
.fixed-header #header {
background-color: rgba(1,1,1,0.0) !important; // remove this css
opacity: 0.5 !important; 
  }

透明标题背景

4 个答案: