使用 Twitter Bootstrap 附加和分离附加的标题答案

【问题标题】：Attach and detach affixed headers with Twitter Bootstrap使用 Twitter Bootstrap 附加和分离附加的标题
【发布时间】：2013-02-22 20:37:53
【问题描述】：

我正在尝试使用 affix 功能将标题附加到屏幕顶部，但仅将其附加到页面的一部分。当用户滚动超过某个点时，它应该分离（并与内容一起向上滚动）。

我正在使用来自 jsfiddle 的脚本。

我现在正在尝试的是：

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

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

像这样使用.detached 类：

.detached { position: static; }

无法让它工作。有什么建议吗？

【问题讨论】：

我不认为这可能与标准 Twitter Bootstrap 词缀模块有关。
我认为您正在寻找一个问题 [已在此处回答。][1] 查看小提琴。 [1]：stackoverflow.com/questions/15197453/…

标签： javascript css twitter-bootstrap affix

【解决方案1】：

Twitter Bootstrap 词缀模块没有该选项。但是，我用过很多次hcSticky，太棒了。看看吧，简单好用，效果很好。

【讨论】：

它可以通过 bootstrap 和 js 实现
“使用 bootstrap 和 js”... 这意味着 - 使用 bootstrap，但也可以更改提供的 js 代码并创建自己的。如果 OP 可以做到这一点，他永远不会问这个问题。所以我指出了小脚本，简单易用。
@Shail twitter-bootstrap 怎么可能？我想避免使用另一个库（例如 hcSticky 或 jsfiddle）。

【解决方案2】：

您可以将逻辑写在一个函数中，并将其作为 offset.top 传递给 affix。

试试

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.

【讨论】：

太棒了，正是我需要的。多个导航栏版本就在这里：jsfiddle.net/BuNq2/5

【解决方案3】：

另一个可能对您有用的选项：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'});
}
});
})

祝你好运！

【讨论】：