navbar-fixed-topの上にグラデーションバーを追加します。スクロールするときにグラデーションバーを非表示にする

ナビゲーションバーをnavbar-fixed-topにしたい。グラデーションバーは、添付画像のようにNavbarの上に配置する必要があります。私はこのコードを試しましたが、navbar-fixed-topクラスはその下のグラデーションバーを隠し、グラデーションバーは見えません。私はjQueryやjavascriptなしで純粋なCssソリューションを望んでいます。navbar-fixed-topの上にグラデーションバーを追加します。スクロールするときにグラデーションバーを非表示にする

body{ background: grey!important; 
 
} 
 
/*+++++++ COLOR BAR ++++++++*/ 
 
.color-bar{ width: 100%; 
 
    \t  height: 4px; \t 
 
      background: -webkit-linear-gradient(left, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%); 
 
      background: -o-linear-gradient(left, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%); 
 
      background: linear-gradient(to right, #f0c24b 0%, #b5d56a 20%, #ea7066 40%, #84bed6 60%, #a597e7 80%, #ea77ad 100%); 
 
} 
 

 
/*+++++++++ NAVBAR white */ 
 
.navbar {background-color: white; \t 
 
} 
 

 
/* iNCREASING NAVBAR SIZE */ 
 
.navbar-static-top, .navbar-header, .navbar-collapse { min-height: 105px !important ; } 
 

 

 
/*++++++++++ NAVBAR BOTTOM DECORATION */ 
 
.nav-decor{ 
 
\t width: 100%; 
 
\t position: absolute; 
 
\t height: 10px; 
 
\t left: 0px; 
 
\t bottom: -10px; 
 
     background-image: url(../Images/shape.png); 
 
     background-repeat: repeat-x;} 
 

 
.container-fluid{ padding-left: 5% !important; 
 
\t   padding-right: 5% !important; \t 
 
} 
 

 
.navbar-nav{ position: absolute; 
 
    \t  right: 15%; 
 
       top:30%; 
 
\t  font-size: 20px; 
 
} 
 

 
.navbar-nav>li>a>span { 
 
    padding: 0; 
 
    line-height: 16px; 
 
    text-align: center; 
 
    text-transform: uppercase; \t 
 
} 
 
.navbar-nav>li>a{ font-family: 'Londrina Solid', cursive; 
 
\t \t letter-spacing: 2px; 
 
    \t   font-weight: 400; 
 
} 
 

 
/*++++++++ NAVBAR LINKS COLOR +++++++*/ 
 
.color-1>a { color: #f26f29;} 
 
.color-2>a { color: rgb(255, 186, 6); } 
 
.color-3>a { color: #a9d63b; } 
 
.color-4>a { color: #6ab3d1; } 
 
.color-5>a { color: #907ee2; } 
 
.color-6>a { color: #e868a7; }

<div class="container-fluid color-bar"></div> 
 
\t 
 
<nav class="navbar navbav-default navbar-static-top" role="navigation"> 
 
\t \t <div class="container-fluid"> \t \t \t \t 
 
\t \t <div class="navbar-header"> \t \t \t \t \t 
 
\t \t \t <a class="navbar-brand" href="#"><img src="Images/logo-xs.png" alt="Intelligram"></a> 
 
\t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t \t <span class="icon-bar"></span> 
 
\t \t \t </button> 
 
\t \t </div> 
 
\t \t \t \t 
 
\t \t <div class="collapse navbar-collapse"> 
 
\t \t \t <ul class="nav navbar-nav navbar-right"> \t 
 
\t \t \t \t <li class="color-1 active"> 
 
\t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t \t <span>Home</span> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="color-2"> 
 
\t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t <span>Classes</span> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="color-3"> 
 
\t \t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t \t \t <span>Pages</span> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="color-4"> 
 
\t \t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t \t \t <span>Blogs</span> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="color-5"> 
 
\t \t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t \t \t <span>Store</span> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li class="color-6"> 
 
\t \t \t \t \t \t <a href="index.html"> 
 
\t \t \t \t \t \t \t <span>Events</span> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t </div> 
 

 
</div> \t \t \t 
 
<div class="nav-decor"></div> 
 
</nav>

] 2] 2

出典

2017-10-15 Vipul Tyagi