HTML CSS examples for CSS Widget:Nav Bar
Decrease opacity of content when been scrolled under fixed navbar
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w ww.j a v a 2 s . c o m--> margin:0; padding:0; } body { background-color:Chartreuse; } .header { position:fixed; top:0; left:0; width:100%; z-index:21; background-color:yellow; } .header-bg { position:fixed; top:51px; left:0; height:100px; width:100%; background-image:linear-gradient(blue,rgba(48, 53, 173, 0)); } p { text-align:center; padding:21px 0; } </style> </head> <body> <p class="header">Lorem ip</p> <div class="header-bg"></div> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> <p>Lorem ips</p> </body> </html>