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.
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.
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.