覆蓋在頁腳上的jQuery Stickysidebar

Question

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

這裏是我的網頁： http://dev.erfolgsphoto.de/test/index.html

的問題是，我的頁面上，你可以看到滑動盒覆蓋在頁腳，但我希望它不要覆蓋上頁腳。滑動框應位於父DIV中（帶有「body-container-main」類的DIV）。插件網站上的示例（請參閱多個粘滯盒子的示例）也按我的預期工作。但我的代碼沒有按預期工作。

Answer 1

在stickysidebar.jquery.js的第97行，插件正在循環您粘性側邊欄的所有父元素。註釋中提到：

上去的樹，直到我們找到一個ELEM到位置從

它從調用檢索到.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的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() 
    };