防止Twitter的引導詞綴從滾動超過點

當使用Twitter Bootstrap's Affix feature，我可以從頁面頂部設置offset，這樣一旦用戶滾動過去的offset點，側邊欄將隨着用戶向下滾動頁。防止Twitter的引導詞綴從滾動超過點

在某些頁面上，一旦用戶滾動到頁面的底部，我的詞綴側邊欄滾動超出頁面的內容部分進入我sub-footer和頁面footer如下面的圖所示。

問題：如何防止粘貼的項目浮動低於我的內容部分（此處由最後一個FAQ手風琴顯示）？

UPDATE（添加的代碼）

<body data-target="#more-questions" data-spy="scroll" data-offset="125"> 
    <!-- ... more code ... --> 
    <div class="row" data-spy="affix" data-offset-top="1"> 
     <div class="span3" id="more-questions"> 
     <div class="content-bubble drop-shadow curved"> 
      <h3 class="uppercase"><i>Do You Still Have <strong>Questions?</strong></i></h3> 
      <a href="contact-us.php" class="btn btn-prime">CONTACT US</a> </div> 
     <div class="content-bubble-triangle"></div> 
     </div> 
    </div> 
    <!-- ... more code ... --> 
</body>

Twitter Bootstrap Affix sidebar scrolled below content section

來源

2013-07-12 adamdehaven

可能重複[取消固定Twitter的引導的貼上印有滾動]（http://stackoverflow.com/questions/13417818/unpin-twitter-bootstraps-affix -on-scroll） –

更新當你的底部偏移下的滾動區域的高度是更大然後是貼元件高度的計算出錯。在你的元素被設置爲絕對位置後，這個位置被用於下一次計算。所以當你向下滾動的時候，你的課堂會一次又一次地從詞綴變成詞綴。

試試這個修復：

var tmp = $.fn.affix.Constructor.prototype.checkPosition; 
$.fn.affix.Constructor.prototype.checkPosition = function() { 
    if(($(document).height()-this.$window.scrollTop())<this.options.offset.bottom && this.$element.hasClass('affix-bottom')) return; 
    tmp.call(this); 
    }

見：http://plnkr.co/voYMKdQP75XnalDeHUTB

~~也許你的CSS設置有誤？看看這個菜單： http://twitter.github.io/bootstrap/javascript.html 它得到：~~

// side bar setTimeout(function() { $('.bs-docs-sidenav').affix({ offset: { top: function() { return $window.width() <= 980 ? 290 : 210 } , bottom: 270 } }) }, 100)

當加載頁面，不滾動affix類ul 的改變：<ul class="nav nav-list bs-docs-sidenav affix">

詞綴是由JavaScript設置到affix-top。該列表不必更改位置，因此是沒有爲affix-top定義的css規則。

當你開始從底部（該affix-top將被刪除）的affix類應用到列表（UL）從頂部290/210px和270px之間滾動。 .affix會從bootstrap.css .affix { position: fixed; }和 .bs-docs-sidenav.affix { top: 40px; }從docs.css（你必須定義這個！）當你從底部affix類改爲affix-bottom下270px滾動

~~。所以 affix-bottom類應用到您的列表（ul）。 .bs-docs-sidenav.affix-bottom { bottom: 270px; position: absolute; top: auto; }從docs.css（你必須得定義這個！）~~

的

來源

2013-07-13 00:02:26

當我在我的頁面上滾動時，'affix-bottom'類永遠不會被應用。這是什麼原因？ – adamdehaven

你可以發佈你的代碼嗎？ –

在原始問題 – adamdehaven

防止Twitter的引導詞綴從滾動超過點

回答

相關問題