附加和分離與Twitter的貼紙標題引導

我想使用附加功能將標題附加到屏幕的頂部，但它只附加一頁的一部分。它應該在用戶滾動經過某個點時分離（並與內容一起滾動）。我正在使用此腳本jsfiddle。附加和分離與Twitter的貼紙標題引導

我想要，現在是這樣的：

$('#nav-wrapper').height($("#nav").height()); 

$('#nav').affix({ 
    offset: $('#nav').position() 
}); 
$('#nav').detached({ 
    offset: $('#bottom').position() 
});

隨着像這樣.detached類：

.detached { position: static; }

不能得到這個工作。有什麼建議麼？

來源

2013-02-22 jjms

我不認爲這可能與標準的Twitter Bootstrap附加模塊。 – Jesse 2013-02-22 21:12:19

我想你正在尋找一個問題[在這裏回答] [1]看看小提琴。 [1]：http://stackoverflow.com/questions/15197453/affix-div-to-bottom-of-window?rq=1 – Thomas 2013-04-24 18:16:26

Twitter Bootstrap添加模塊沒有該選項。但是，我用了很多次，這太棒了。看一看，這只是使用和工作得很好。

來源

2013-02-22 21:41:18

有可能用自舉和JS – Shail 2013-02-23 05:00:18

「隨着引導和js「...這意味着 - 使用bootstrap，但也改變提供的js代碼並創建自己的。如果OP能做到這一點，他從不問這個問題。所以我指出了一個簡單易用的小腳本。 – 2013-02-28 11:41:36

@Shail twitter-bootstrap怎麼可能？我想避免使用另一個庫（如hcSticky或jsfiddle）。 – 2013-06-27 12:15:40

您可以將函數中的邏輯寫入函數，並將其傳遞給offset.top。

嘗試

var navHeight = $("#nav").height(); 
var detachTop = $("#detach").offset().top; 
var navTop = $("#nav-wrapper").offset().top; 

$('#nav-wrapper').height(navHeight); 
$('#nav').affix({ 
    offset : { 
     top : function() { 
      if ((navHeight + $(window).scrollTop()) > detachTop) { 
       return Number.MAX_VALUE; 
      } 
      return navTop; 
     } 
    } 
});

Fiddle is here.

來源

2013-07-04 02:42:10 Clxy

太棒了，正是我需要的。多個導航欄版本在這裏：http://jsfiddle.net/BuNq2/5/ – 2015-05-13 19:40:44

這可能會爲你工作的另一種選擇：http://jsfiddle.net/panchroma/5n9vw/

HTML

<div class="header" data-spy="affix"> 
affixed header, released after scrolling 100px 
</div>

的Javascript

$(document).ready(function(){ 
$(window).scroll(function(){ 
var y = $(window).scrollTop(); 
if(y > 100){ 
    $(".header.affix").css({'position':'static'}); 
} else { 
    $(".header.affix").css({'position':'fixed'}); 
} 
}); 
})

祝你好運！

來源

2013-07-04 04:07:24

附加和分離與Twitter的貼紙標題引導

回答

相關問題