jQuery Stickysidebar overlaying on footer

I am using the jQuery stickybox plugin. Here is the plugin's website: http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/

Here is my page: http://dev.erfolgsphoto.de/test/index.html

The problem is, on my page, you can see the sliding box is overlaying on footer but I want it to do not overlay on footer. The sliding box should be in the parent DIV (DIV with class "body-container-main"). The example on the plugin's site (please see example with multiple sticky boxes) is also working as I am expecting. But my code is not working as expected.

Solution

On line 97 of stickysidebar.jquery.js, the plugin is looping over all the parent elements of your sticky sidebar. The comment mentions:

go up the tree until we find an elem to position from

The very first element it retrieves from the call to .parent() inside that loop is your div "wrapper". The subsequent is body followed by html. The element that it considers first is not body-container-main.

When $this.parent() gets called on line 79, it does refer to the container div that you intended. What should really be happening is that that loop on line 97 should never get going. That means that one of the three conditions needs to be false. I propose that you make the $parent.css("position") something other than "static". In your example page for the stickybox multi, they have laid out the parent divs as position:absolute and position:relative. The shopping cart / basket's parent() div is position:static so that one ends up sticking to the entire page.

Change your parent div's position css property to relative.

Applicable sections of code for others:

// 'Line 75' of the plugin code here
var setPosition = function ($sb) {
if ($sb) {
  var $this = $sb
    , $parent = $this.parent() // **line 79**
    , parentOffs = $parent.offset()
    , currOff = $this.offset()
    , data = $this.data("stickySB");
  if (!data) {
    data = {
        offs: {} // our parents offset
      , orig: { // cache for original css
            top: $this.css("top")
          , left: $this.css("left")
          , position: $this.css("position")
          , marginTop: $this.css("marginTop")
          , marginLeft: $this.css("marginLeft")
          , offset: $this.offset()
        }
    }
  }
  //go up the tree until we find an elem to position from
  while (parentOffs && "top" in parentOffs // **line 97**
    && $parent.css("position") == "static") {
    $parent = $parent.parent();
    parentOffs = $parent.offset();
  }
  if (parentOffs) { // found a postioned ancestor
    var padBtm = parseInt($parent.css("paddingBottom"));
    padBtm = isNaN(padBtm) ? 0 : padBtm;
    data.offs = parentOffs;
    data.offs.bottom = settings.constrain ?
      Math.abs(($parent.innerHeight() - padBtm) - $this.outerHeight()) :
      $(document).height();
  }
  else data.offs = { // went to far set to doc
      top: 0
    , left: 0
    , bottom: $(document).height()
  };