How to use jQuery Sticky-Kit?

JavaScript
1

II would like to know how to use Sticky-Kit from http://leafo.net/sticky-kit/#examples.
I found that their example have many redundant codes. I did download the code but the codes also same.:nono:

I am using $(“#sidebar”).stick_in_parent().

2

Hi there,

The documentation says:

Just call stick_in_parent on the elements you want to be stuck inside of their parent.

which seems pretty self-explanatory to me.

Is there one part you are having trouble with?
Could you post an example?

3

Thanks for the reply. I tried it and I have a minor problem:

I have left column and right column with class=span3. When I scroll btm right column will move left side a little bit. Any idea to make it stay vertically?

<script src="/mod/stricky/jquery.sticky-kit.min.js"></script>
<script type="text/javascript">
{literal}
  function attach() {
    $(".span3").stick_in_parent({container: $("#topResults"), offset_top: 10});
  }

  $(document.body).on("click", ".detach", function(e) {
    $(".span3").trigger("sticky_kit:detach");
  });

  $(document.body).on("click", ".attach", attach);
  attach();
{/literal}
</script>

You can view action at: http://thejobs.com.my/display-job/1502/Technical-Instructor-(1-Year-Contract).html

4

That’s happening, because a parent div, which has a CSS property of float:left, is being wrapped around to the right hand column when it is fixed.

My first idea would be to give the right hand column an unique id, then do something like

#myuniqueid.is_stuck{
  padding-left: 20px;
}

The .is_stuck class is only applied when the element is stuck, which means you can compensate for the offset.

Make sense?

5

Thanks for the reply. Left side of Summary column didn’t move to left when scroll but right side of column is smaller than before scrolling.
The red ribbon is stay but gray background of the column is moving left making it smaller in size when scroll down.

6

Well that sounds like progress.
Obviously you’ll have to experiment with the CSS rules to make it behave as you want.
If you get stuck, this would be a good question for the CSS forum.

As an aside, I tried looking at the page you linked to previously, but it timed out :frowning: