jquery - “反向”粘性标题

Question

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

到目前为止，我所做的是使用Jquery Waypoints插件的这段代码：

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

一旦达到某个元素（在这种情况下h1），它基本上会将标题设置为看不见的动画。但我希望它可以由用户滚动。

我希望我说清楚了，这有点难以解释:)

任何想法将不胜感激。

Answer 1

您可以尝试将JQuery Wayppints替换为JQuery ScrollToFixed。他们的完整演示非常漂亮。我认为它完全符合您的要求。

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