javascript - 使用 Twitter Bootstrap 附加和分离附加的标题

Question

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

我正在使用这个jsfiddle中的脚本。

我现在正在尝试的是：

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

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

像这样的.detached类：

.detached { position: static; }

无法让这个工作。有什么建议么？

Answer 1

您可以在函数中编写逻辑，并将其作为 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;
        }
    }
});

小提琴来了。

Answer 2

Twitter Bootstrap 词缀模块没有该选项。但是，我已经使用了很多次hcSticky，它很棒。看一下，它使用起来很简单，而且效果很好。

Answer 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'});
}
});
})  

祝你好运！