创建不透明度 Header

Question

我想要像这样的不透明度 header，所以当我向下滚动时，会出现固定的 header 和黑色背景。我为 wordpress 制作，但现在我想为 bootstrap 制作它，但它不起作用。

我也试过this one，因为这个曾经用于wordpress网站，但是现在我自己试了就不行了。

我只是通过使用它来加载脚本，因为它就在与我的 about.html.

相同位置的 js 映射中

<script src="js/header.js"></script>

HTML

<header id="header">
  <div id="logo"><img src="./images/logo.png" /></div>
    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="selected"><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>    
    </nav>

</header>

CSS

#header {
    height: 80px;
    position: fixed;
    top: 0px;
    width: 100%;
    /*background-color: rgb(0, 0, 0);*/
}

    #header.scrolled {
        opacity: 1; 
        background: #000;
        color: #fff;
        transition: all 1s ease;   
    }

JS

$(document).ready(function() {

  $(window).scroll(function() {

    if ($(window).scrollTop() > 10) {
      $('header').addClass('scrolled');
    } else {
      $('header').removeClass('scrolled');
    };
  });
});

Example of not working

我只想给 class 添加不透明度和 1 秒淡入淡出。或者也许是关于如何修复它的不同解决方案。感谢阅读我的问题。

Answer 1

运行正常，您只需将 JS 移动到正文底部，并确保首先加载 jQuery。您还可以将过渡添加到 #header 而不是 #header.scrolled：这样当您向上滚动时它会很好地淡化。查看演示：

$(document).ready(function() {

  $(window).scroll(function() {

    if ($(window).scrollTop() > 10) {
      $('header').addClass('scrolled');
    } else {
      $('header').removeClass('scrolled');
    };
  });
});

#header {
  height: 80px;
  position: fixed;
  top: 0px;
  width: 100%;
  transition: all 1s ease;
}
#header.scrolled {
  opacity: 1;
  background: #000;
  color: #fff;
}
.menu ul {
  list-style: none;
}
.menu li {
  float: left;
  margin: 1em;
}
body {
  background: grey;
  min-height: 1000px;
  margin: 0;
}

<header id="header">
  <div id="logo">
    <img src="http://larsdejonge.nl/bootstrap/images/logo.png" />
  </div>
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li class="selected"><a href="#">About</a>
      </li>
      <li><a href="#">Work</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>

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

Answer 2

我看到您在浏览器控制台中有错误，该错误是因为您首先将 .js 文件放在 jquery 文件之前。始终将 jquery 文件放在任何包含 jquery 函数的 .js 文件或 js 代码之前。

创建不透明度 Header

Creating Opacity Header

html

css

header

opacity