开发者

What styles did Google use for their new Gmail toolbar? [duplicate]

开发者 https://www.devze.com 2023-03-20 19:46 出处:网络
This question already has answers here: Closed 11 开发者_如何学Pythonyears ago. Possible Duplicate:
This question already has answers here: Closed 11 开发者_如何学Pythonyears ago.

Possible Duplicate:

Swap CSS class on the basis of Scroll Position with Javascript

So if go into themes and select Preview you can see the new layout to gmail. It has a tool bar that has your archive,spam,delete,move to, etc.. buttons. It starts in a static location under the search mail section, but once you almost scroll past it, it remains directly at the top of your page. (and vice versa)

I have done the div remaining at the top of your page before, but not the part where it starts at a static location, scrolls like any other part, then once you scroll almost past it, it remains at the top.

Any idea how this was done?


The trick is to use JavaScript to determine when the element is at the top of the page as the page is scrolled. When it is, apply a class to it that makes it fixed position.

There's a tutorial on it @ http://jqueryfordesigners.com/fixed-floating-elements/


It's simple, you just give the element position:fixed using javascript when the page is scrolled past a certain point. Why don't you just inspect the element using firebug or another browser's developer tools?

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号