How to make top bar go transparent when scrolling down? - css

Question

Right now i have one bar located on top and here is the CSS for it:
#header_bar {
background: #000000;
height: 60px;
position: fixed;
top: 0px;
width: 100%;
z-index: 10020;
}
My question is, how i can make this bar go transparent when the page is scrolled?
Should i use opacity option somehow?
Thanks in advance!

Answer 1

I like the JQuery solutions here, but for completeness wanted to include a JavaScript solution in case anyone was looking for that.
The following will fade the navigation bar when it is not at the top, and return it to a solid color when it is.
function fadeNav(){
var offset = getScrollXY();
//if y offset is greater than 0, set opacity to desired value, otherwise set to 1
offset[1] > 0 ? setNavOpacity(0.5) : setNavOpacity(1.0);
}
function setNavOpacity(newOpacity){
var navBar = document.getElementById("header_bar");
navBar.style.opacity = newOpacity;
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft ||
document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
And of you would call it by adding this in script blocks on your page (at the bottom is best practice):
<script type="text/javascript">
window.onscroll = fadeNav;
</script>
Here is a fiddle demonstrating a working version
Credit for the getScrollXY() function goes to: this site - function is at the bottom

Answer 2

You can't do it with just CSS, you'll need JavaScript/jQuery. Here's a little jQuery code snippet that will fade it in and out:
var opacity = 1;
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st == 0)
$('#header_bar').css('opacity','1');
if (opacity > 0.5 && (st > lastScrollTop)){
$('#header_bar').css('opacity','-=0.01');
opacity -= 0.01;
}
else if(opacity < 1)
{
$('#header_bar').css('opacity','+=0.01');
opacity += 0.01;
}
lastScrollTop = st;
});
http://jsfiddle.net/LBHvD/

Answer 3

With pure css you will not be able to achieve this effect but by using jQuery to manipulate the css then you can.
jQuery
$(window).scroll(function() {
$('#header_bar').css({opacity: 0});
});
JSFIDDLE
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
});
JSFIDDLE Fading out .animate
If you want it to come back once you reach the top again then let me know!
Fade back in at top (Seems to fade in very slow)
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
if ($(window).scrollTop() === 0) {
$('#header_bar').animate({opacity: 1});
}
});
JSFIDDLE fade in/out
Hide and show
$(window).scroll(function() {
$('#header_bar').hide(500);
if ($(window).scrollTop() === 0) {
$('#header_bar').show(500);
}
});
JSFIDDLE show/hide

Answer 4

This works great for me, and you can change the fadeTo to animation and works just as great.
var scroll_transparency = false;
$(window).scroll(function() {
// $('div.navbar-main-top').hide(500);
if ($(window).scrollTop() == 0) {
scroll_transparency = false;
$('div.navbar-main-top').fadeTo( "fast", 1 );
} else {
if (scroll_transparency == false) {
$('div.navbar-main-top').fadeTo( "fast", .9 );
scroll_transparency = true;
}
}
});