How to add a transparent header to a scroll?

I was curious how the header that's used in this scroll:, 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. 

0 votes

1 answers



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.

0 votes

Ahh. Excellent. Thanks Jonathan, both for the answer and for getting to it so quickly.

Johnathan, thanks for posting but I'm getting a weird glitch when I try to use that code. Whenever I add it in, the "header" shape appears normally on the page, but then once you start scrolling the shape jumps to about halfway across the width of the page, with half the shape missing. Any idea what's going on?

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; "


@paul, could you provide a link to the scroll? I'll take a look to see what's going on. But based on your comment, it looks like you are trying to update something within scrollkit and the skrollr function.

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.


Hi Jonathan I managed to fix a form as header. On top of the form I have a fixed logo and not yet fixed text. When I start scrolling, everything except the form disappears. Do you know a solution for that? Would be grateful! check out Thanks, Michael