How to add a transparent header to a scroll?
I was curious how the header that's used in this scroll: http://gearpatrol.com/gp100/2013-awards/, was accomplished?
Specifically I'm interested in having a semi-transparent header that remains at the top of the page as the reader scrolls through the content.
 |
Alexandra Nicolas
Member (35) 1 1 1 |
12/09/2013 |
The best way is to check out their CSS.
But you can accomplish it with the following styles for the header:
.header {
position: fixed;
top: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.55);
}
The "Background-Color" is where the transparency happens. That last 0.55 can be adjusted for the desired transparency.
"position: fixed;" locks it to the top.
"top: 0;" positions it 0px from the top of the browser.
Hope that helps.
 |
Jonathan Glass
Member (483) 1 4 2 |
12/09/2013 |
EDIT: This is what the code looks like for skrollr: " top:-2px;left:-364px;overflow:hidden;background-color:rgb(187,221,247);width:1259px;height:91px;z-index:0;transform:rotate(0deg);-o-transform:rotate(0deg);position: fixed;top: 0; "
The header html needs to be updated within the wordpress plugin admin along with the corresponding css. This should not be used within scrollkit itself.
