粘性頂部導航加上每個部分的元素

那裏沒問題。

每個部分都有一個標題圖形，這實際上只是一個彩色條。當我向下滾動每個部分時，我希望該部分的彩條粘在導航下面。所以，當你滾動時，導航正在收集碎片可以說。

如果我有5個部分，當我處於頁面底部時，導航欄下面會有5個彩色條。

有沒有一個例子或插件，這將是相當簡單的完成？

2013-11-03 Quad6

雖然不是立竿見影的解決方案（由於瀏覽器支持），這是值得注意的位置：粘;現在是一件事情。 [HTML5ROCKS]（http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit） – colbydauph

在我開始解釋的事情，這裏有一個快速的小演示，我抽出，看一看，然後我送你通過我所做的：

http://jsfiddle.net/4JUaK/1/

var bar_positions = []; 
$.each($('.bar'), function() { 
    bar_positions.push($(this).offset().top); 
});

首先，我製作了一個數組來存儲條的位置，方法是循環並添加它們。

var collected_bars = 0; 
var debris_height = 20; 
$(window).scroll(function() {

我在這裏完成的所有工作都是初始化一些我稍後會用到的變量，然後我創建了一個scroll()函數，每當用戶滾動時它就會被觸發。

var random_number = 0; 
    if ($(window).scrollTop() + debris_height >= bar_positions[collected_bars]) { 
     collected_bars++; 
     debris_height += 20; 
     random_number = Math.random() * 8 - 4; 
     $('.bar' + collected_bars).css({ 
      'position': 'fixed', 
      '-webkit-transform': 'rotate(' + random_number + 'deg)', 
      'transform': 'rotate(' + random_number + 'deg)' 
     }); 
    }

這是它得到樂趣。條件檢查以查看scrollTop()位置 - 加上導航欄和收集的酒吧的任何額外高度 - 是否大於最近酒吧的位置。通過使用collected_bars變量來查看數組中的第一個元素，找到最近的條。

如果確實超過了這個位置，我會向該變量添加一個，告訴它我們現在要去查找下一個欄。然後我在debris_height上添加一些數據，以幫助正確計算下一個位置的位置。我還將必要的CSS應用到我們剛剛「收集」的酒吧。我將它設置爲position: fixed;，並且由於我已經在樣式表中聲明瞭left和top屬性，這就是它需要去的地方。我也隨意旋轉......這可以動畫使它看起來更酷，但是我會把它留給你。

這段代碼基本上就是我們剛纔所做的版本的鏡像......如果我們的位置變得比以前收集的條塊更小，就把它們放回原來的樣子！現在

，很明顯，我很快這樣做，這是一個有點粗糙，但這個應該夠你拿和清理，它需要是...

一個，我做了一件大事不包括在我的例子中：

當您將欄更改爲固定位置時，它不再佔用頁面中的空間，並且所有內容都將向上移位。在我的例子中，我沒有做任何事情來適應這種情況，所以定位比較有點不同步。最好的解決方案是添加padding或什麼東西來填補空間，當一個元素被帶出流程，以防止一個明顯的變化。否則，您需要以某種方式將其計算到公式中。

希望幫助..讓我知道，如果你有任何問題！

來源

2013-11-03 05:26:01

感謝。非常感謝。我現在需要消化和玩這個。這是一個真棒開始和似乎是一個解決方案，甚至我可以在JS方面的理解。 PS我可能確實有進一步的問題，但會嘗試螺母儘可能多，我可以自己。 – Quad6

粘性頂部導航加上每個部分的元素

回答

相關問題