“反向”粘性标题

时间:2013-08-01 08:56:16

标签: jquery css

我正在尝试实现最初修复并保持在顶部的标题,然后,当达到某个元素或滚动位置时,它将滚出视口,就像它是“正常”内容一样。

到目前为止,我使用Jquery Waypoints插件执行此代码:

$('h1').waypoint(function(direction) {
    $(".header-container").slideToggle();
});

只要达到某个元素(在这种情况下为h1),它就会基本上将标题设置为动画。但我希望用户可以滚动它。

我希望自己明确表示,这很难解释:)

非常感谢任何想法。

1 个答案:

答案 0 :(得分:2)

您可以尝试将JQuery Wayppints替换为 JQuery ScrollToFixed 。他们的 Full demo 非常华丽。我认为它完全符合您的要求。

$('.header').scrollToFixed({
    preFixed: function() { $(this).find('h1').css('color', 'blue'); },
    postFixed: function() { $(this).find('h1').css('color', ''); }
});