Question

我正在使用jQuery stickybox插件。这是插件的网站： http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/

这是我的页面： http://dev.erfolgsphoto.de/test/index.html

问题是，在我的页面上，您可以看到滑动框在页脚上覆盖，但我希望它不会在页脚上叠加。滑动框应该在父DIV中（DIV，类为“body-container-main”）。插件网站上的示例（请参见带有多个粘性框的示例）也正如我所料。但我的代码没有按预期工作。

Answer 1

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

走上树，直到我们找到一个从
定位的元素

它从该循环内部对.parent()的调用中检索的第一个元素是你的div“包装器”。接下来是body，后跟html。它首先考虑的元素是不 body-container-main。

在第79行调用$this.parent()时，确实引用您想要的容器div。真正应该发生的是第97行的循环永远不会发生。这意味着三个条件中的一个必须是假的。我建议你制作$parent.css("position")以外的东西而不是“静态”。在您的多功能粘贴盒的示例页面中，他们将父div设置为position:absolute和position:relative。购物车/购物篮的parent() div为position:static，以便最终坚持整个页面。

将您父div的position css属性更改为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()
  };

jQuery Stickysidebar叠加在页脚上

1 个答案: