HTML固定的大元素

我已經費盡了我的大腦，我的谷歌富了幾個小時，現在試圖找到一個解決這一個，但似乎無法拿出任何令人滿意的。HTML固定的大元素

我想一個元素粘貼到頁面的一些搜索條件的一側，就像引導的「後綴」插件。（Demo Here）。問題在於元素比窗口高很多很常見。所以會涉及元素本身的滾動。

通常這不會是一個問題，因爲當用戶點擊該文件的頂部+底部，他們將能夠看到固定元素的頂部和底部。（請參閱bootstrap示例，同時縮小窗口非常短）。但是我們打算在結果集上使用無限滾動，這意味着不會有底部觸發，因此它們永遠不會看到固定元素的底部。隨着用戶向下滾動，它需要被固定下來以便用戶看到所有的標準，然後在上升的過程中，它需要被固定下來。

所以我通過修改引導的插件（我不實際使用引導程序）開始了。現在向下滾動頁面很容易，使用元素底部的固定點意味着它不會被粘貼，直到到達底部。

但是再次向上滾動就是我打的問題。

難道我失去了一些東西真的很明顯，容易在這裏（它週一上午畢竟），或者沒有人知道一個插件/補丁，以白手起家貼上。

TL; DR 需要在頁面上添加一個很高的元素並允許它滾動。所以它在下降的過程中被固定下來，然後當它們向上滾動時，元素沒有被固定，所以它也被滾動。一旦元素的頂部被擊中，修復它。

來源

2012-12-03 Paystey

這裏有一個小的演示：http://jsfiddle.net/6rQvq/15/ – Paystey

這是你想要做DEMO

簡單的jQuery的功能，這將有助於什麼。

$(function() 
    { 
affix= $(".affix-top"); 
var affixHeight = parseInt(affix.height()); 
var affixTop = parseInt(affix.offset().top); 
var affixBottom = parseInt(affixTop + affixHeight); 

// Bind a scroll event for the whole page 
$(document).bind("scroll", function(e) 
{ 
    // Calculate how far down the user has scrolled 
    var screenBottom = parseInt($(window).height() +$(window).scrollTop() ); 

    // Test if the div has been revealed 
    if(screenBottom > affixBottom) 
    { 
     affix.attr("style",""); 
     affix.css({"bottom":"0px","position":"fixed"}); 
    } 
    else 
    { 
    affix.attr("style",""); 
    affix.css({"top":"0px","position":"relative"}); 
    } 
}); 

    });

來源

2012-12-12 14:47:18 Champ

謝謝，這是非常密切的，這是在哪裏我開始（儘管不是幾乎一樣優雅）。但是，如果您滾動頁面的50％，然後想要進入菜單上的「下拉菜單」按鈕，則必須一直滾動到頁面的頂部。這似乎是我無法通過的關鍵。 – Paystey

這是一個邏輯缺陷的人。你必須考慮一個替代方案。你可以做一件事情檢查用戶的滾動方向，並相應地從上到下或從下到上改變菜單位置。 – Champ

HTML固定的大元素

回答

相關問題