创建不透明标题

我想要这样的不透明标题，所以当我向下滚动时，会出现一个带有黑色背景的固定标题。我曾经为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秒的淡出时间内添加不透明度的类。或者可能是一个解决方案，如何解决它。感谢您阅读我的问题。

来源

2016-12-01 FlatDesigner

你在加载jQuery文件之前加载jQuery吗？ – junkfoodjunkie

在body标签结束之前移动这个JS声明。并检查你以前加载jQuery。 – Lukas

你有一个javascript错误。（检查你的控制台）不要忘记添加一个不透明的值到你的头没有.scrolled类。 – Kangouroops

它运行良好，您只需将您的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>

来源

2016-12-01 23:43:08 Dre

哦，哦，谢谢我看到它，并得到它的工作！ :) – FlatDesigner

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

来源

2016-12-01 23:57:53

创建不透明标题

回答

相关问题