Forums

AFQ

What is thing effect called when you scroll down a web page but some part of the header or whatever always stay on the top of browser?

I hope you guys got what i meant it.

How to implement it? Please give me link to any guide if there is any.

filipeb

Something like this? http://jsfiddle.net/xpWG6/

Schmotty

Its called 'fixed' or 'sticky'

set the property of position to fixed and top to 0


.itemstucktotop {
position:fixed;
top:0px;
}

Make sure to add a margin to the top of the page so that content doesn't start behind the fixed content.

Wordpressive

As I know, Schmotty said partially right but it's done better with JavaScript/jQuery. And it gives better animation and effect.

AFQ

@filipeb

Yes that thing.

Is there any detailed guide to it?

filipeb

Erm. I'm not really sure. The positioning itself is quite simple, it just starts to get complex depending on what you want to do.

Anyway, I found this out, might be what you're looking for. Or it might be more complex than what you're looking for.
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

Also, I don't really know of any specific naming for "this". I guess fixed positioning divs?

yinzdo

I've seen it referred to as 'sticky header' and I think @Schmotty has it right. As suggested, remember to set your body margin-top or padding-top equal to the height of the header. This will offset the body content so that it sits right below, but not behind, the header.

Sticky headers are much simpler than sticky footers because it's much easier to predict where your page begins as opposed to where it ends.

Schmotty

Well a sticky footer can be just that same way if you always fix it to the bottom of the browser. And javascript isn't needed unless you want the sticky to move with the page while its where it is supposed to be and then stick after is official position is scrolled out of view.

treehouse : what would you like to learn today?

Forums

What is this thing called and how to implement it?