创建不透明度标头

Question

我想拥有一个像这样的不透明度标头，因此，当我向下滚动时，会出现一个带有黑色背景的固定标头。我已经为WordPress做了

我也尝试过这个，因为它曾经在WordPress网站上工作，但是当我自己尝试时，它将无法使用。

我仅通过使用此脚本加载脚本，因为它只是在JS映射中，与我的大约相同的位置。html。

<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');
    };
  });
});

不工作的示例

我只想在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代码之前。