1

jQuerystickyboxプラグインを使用しています。プラグインのウェブサイトは次のとおりです：http： //www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/

これが私のページです：http： //dev.erfolgsphoto.de/test/index.html

問題は、私のページでは、スライドボックスがフッターに重なっているのがわかりますが、フッターに重ならないようにしたいということです。スライドボックスは、親DIV（クラス「body-container-main」のDIV）にある必要があります。プラグインのサイトの例（複数のスティッキーボックスの例を参照してください）も、期待どおりに機能しています。しかし、私のコードは期待どおりに機能していません。

4

1 に答える 1

1

の97行目stickysidebar.jquery.jsで、プラグインはスティッキーサイドバーのすべての親要素をループしています。コメントは次のように述べています。

配置する要素が見つかるまでツリーを上に移動します

そのループ内への呼び出しから取得する最初の要素.parent()は、div「ラッパー」です。その後に。がbody続きhtmlます。最初に考慮する要素はではありません body-container-main。

$this.parent()79行目で呼び出されると、意図したコンテナdivを参照します。実際に起こっているのは、97行目のループが決して起こらないということです。つまり、3つの条件のいずれかがfalseである必要があります。$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 に答える