TOOLS
Sticky Sidebar Jquery Plugin

sticky sidebar

公司網頁要轉版面,要改用Sticky Sidebar,懶人如我當然是想用Plugin解決 XD

Sticky Sidebar?

就像NAVERまとめ的Sidebar,會一直留在版面見得到的位置,而且Sidebar長於Browser Display Area時,會先Scroll到底,然後才Fix在同一位置。

例子:
http://matome.naver.jp/odai/2141905088716375001
(題外話:田口我男神!XD)

做法

要把Element永遠放在版面固定位置,只要Apply CSS Position: fixed就可,但當Element太長,只用fixed的話,Element的內容就不能全部顯示了。

解決方法

根據NAVERまとめ,Sidebar的position是relative的,直到scroll至部內容已顯示後,才轉至fixed。(當然還有很多其他CSS Rule要用啦,但簡單來說概念就是這樣)

Jquery Plugin
不想自己寫那些CSS Rule的話,可用現有Plugin,我在用的是hcsticky,連IE7都Support!不過min了都有9kb…
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/

其他Plugin
http://jquery-plugins.net/tag/fixed-sidebar

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">