1

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.

4

1 回答 1

1

在第 97 行stickysidebar.jquery.js，插件循环遍历粘性侧边栏的所有父元素。评论提到：

上树，直到我们找到一个元素来定位

它从调用到.parent()该循环内部检索的第一个元素是您的 div “包装器”。body紧随其后的是html。它首先考虑的元素不是 body-container-main。

在$this.parent()第 79 行调用时，它确实引用了您想要的容器 div。真正应该发生的是，第 97 行上的循环永远不会继续。这意味着三个条件之一必须为假。我建议你制作$parent.css("position")“静态”以外的东西。在您的 stickybox multi 示例页面中，他们将父 div 布局为position:absolute和position:relative。购物车/篮子的parent()div 是position:static这样一个人最终会粘在整个页面上。

将父 div 的positioncss 属性更改为relative.

适用于其他人的代码部分：

// '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()
  };
于 2012-05-02T13:23:08.713 回答