Question

我想要一个像这样的不透明标题，所以当我向下滚动时会出现一个黑色背景的固定标题。我已经为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

我只想让这个类添加不透明度和1秒淡入淡出。或者可能是一个不同的解决方案，如何解决它。感谢您阅读我的问题。

Answer 1

它运行正常，你只需要将你的JS移动到正文的底部，并确保你首先加载jQuery。您还可以将转换添加到#header而不是#header.scrolled：这样，当您向上滚动时，它会很好地消失。参见演示：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

创建不透明度标题

2 个答案: