CODEWITHSUNDEEP
jqueryhtmlcss
toutpt
toutpt

Reputation: 5220

How to keep columns content visible (sticky) in a 3 columns layout?

I have a three columns layout. The main column have much contents than the two others.

I have no idea how to achieve this, so any idea, jquery plugin or how to will be appreciated.

I'm using the following technologies in my current project: * jquery * twitter bootstrap 3

This is important to note the column content can be higher than the page itself, so bootstrap affix will not work.

Upvotes: 2

Views: 1149

Answers (3)

Aamir Rind
Aamir Rind

Reputation: 39659

Have a look at this Sticky-Kit Plugin. It works absolutely fine in different use cases.

Upvotes: 3

Gagaro
Gagaro

Reputation: 782

We used margin-top to move the columns. Take a look at https://github.com/collective/collective.rcse/blob/93f47d15694c7f71635d1117342d2b84ea85bab7/collective/rcse/resources/dev/js/theme-desktop.js#L797 to see the function.

Upvotes: 1

Eugine Joseph
Eugine Joseph

Reputation: 1558

This stuff can be done using the jQuery and CSS. Check this out- http://jsfiddle.net/MAPNk/

Here is a small work.

These are few steps I followed:

  1. Called a function on scroll
  2. Check height of sidebar and of window. // window is monitor size.
  3. if (height of sidebar < height of window), change the position of sidebar to fixed
    and top to 0 (or where the div start).
  4. else if ( bottom of window > bottom of sidebar), change the position of sidebar to fixed and bottom to 0.

The above conditions are preformed when scrolling down. Similarly remove position or make it absolute on scrolling up.

Try out the rest and you will definitely find out. :)

Upvotes: 0

Related Questions