为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap导航颜色问题,求解 谢谢

/ 猿问

bootstrap导航颜色问题,求解 谢谢

cindy姣姣 2016-01-28 09:43:58

导航固定在上部,最上面颜色是透明的 然后往下滑动的时候 导航改变背景色,这个怎么设置

56a9723a0001cbb705000023.jpg

56a9723b00018e7c05000054.jpg


查看完整描述

4 回答

?
caocao485

利用js监听滚动事件,直接操作导航栏背景色,或者预先定义css样式,利用js添加相应类名来改变。后种方式更符合bootstrap理念。

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" /> 
  <script src="//cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
  <script src="//cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  <style>
.changeable{background-color: #aaa;}
.content {height: 2000px; }
</style> 
  <script>
$(function(){
var nav=$(".navbar"); //得到导航对象
var win=$(window); //得到窗口对象
win.scroll(function(){
if(win.scrollTop()>0){
nav.addClass("changeable"); 
}else{
nav.removeClass("changeable");
}
})  
})
</script> 
 </head> 
 <body> 
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
   <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">菜鸟教程</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">iOS</a></li> 
      <li><a href="#">SVN</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">jmeter</a></li> 
        <li><a href="#">EJB</a></li> 
        <li><a href="#">Jasper Report</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
       </ul> </li> 
     </ul> 
    </div> 
   </div> 
  </nav> 
  <div class="content"> 
  </div>  
 </body>
</html>


查看完整回答
反对 回复 2018-05-04
?
网聚二傻

用bootstrap_theme.css控制封过

查看完整回答
反对 回复 2016-01-28
?
echo_kinchao

:hover

查看完整回答
反对 回复 2016-01-28
?
pardon110

html5,CSS3 颜色渐变,或转换。设置一下样式代码就好了。

查看完整回答
反对 回复 2016-01-28
  • cindy姣姣
    cindy姣姣
    是设置那个有颜色的么 应该是用转换吧 怎么设置 能实现往下滑换颜色

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信