CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Popa Andrei
Popa Andrei

Reputation: 338

Fixed header needing transparency

I have a div for my header which uses position: fixed in css to stay in place. However, I'd like to add some transparency on the div (div's background which uses a #color)when scrolled content goes under it.

Is that possible with CSS? My bet is on some kind of JavaScript (jQuery perhaps)? I'm not that familiar with JS, any example would be great.

Thanks, Andrei.

PS: I'm not using any images for either page background, or header.

Upvotes: 1

Views: 2973

Answers (4)

Trevor
Trevor

Reputation: 16116

You can achieve this by setting opacity on the div. Values 0-1 the lower the value the more transparent the div.

jQuery

$('#divID').css('opacity','.4');

It can be done in plain css as well

#divId {
    opacity:.4;
}

Update

If you only want your header to be transparent while scrolling you will need to do something like this using jQuery:

$(window).scroll(function() {
    $('#divID').css('opacity','.4');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('#divID').css('opacity','1');
    }, 250));
});

Update 2

If you only want your header to be transparent when the window is scrolled down.

$(window).scroll(function() {
    if($(this).scrollTop() == 0)
        $('#divID').css('opacity','1');
    else
        $('#divID').css('opacity','.4');
});

Example

http://jsfiddle.net/VZU9K/

Upvotes: 1

Mark Simpson
Mark Simpson

Reputation: 2384

You can either use opacity:

/* Note that opacity will apply to all descendant elements as well, */
/* so all your links/text/logo will inherit the opacity value as well.*/

.header {
    opacity: 0.5;
}

or give just make the background translucent using HSLA or RGBA.

.header {
    background: #F00F00; /* background color for <IE8 */
    background: hsla(100, 50%, 50%, 0.5); 
    /* the last value (0.5) determines the opacity */
}

Upvotes: 0

user3005791
user3005791

Reputation: 106

You could set following background-color in css of that div. 0.7 is the opacity value.

background-color: rgba(200,200,200,0.7);

Upvotes: 0

Joshua Robinson
Joshua Robinson

Reputation: 3563

To set opacity on a background you need to use rgba instead of the hexadecimal code for the background color. You can do this with css:

#div {
  background-color: rgba(0, 0, 0, .4);
}

The first three numbers are red, green, blue, and can range from 0 to 255, the final number is the opacity which has a range of .0 (0%) to 1 (100%).

For quick conversions from a hexadecimal code to rgb I usually use a site like: http://www.javascripter.net/faq/hextorgb.htm

Josh

Upvotes: 1

Related Questions