“反向”粘性标题

Question

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

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

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

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

我希望自己明确表示，这很难解释：）

非常感谢任何想法。

Answer 1

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

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