Question

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

我正在使用此jsfiddle中的脚本。

我现在正在尝试的是：

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

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

使用.detached类，如此：

.detached { position: static; }

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

Answer 1

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

Answer 2

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

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

祝你好运！

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

3 个答案: