“Reverse” sticky header

问题

I am trying to implement a header that is originally fixed and stays on top, then, as a certain element or scrolling position is reached, it will scroll out of the viewport as if it were "normal" content.

What I did until now is this code using the Jquery Waypoints plugin:

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

It basically animates the header out of sight as soon as a certain element (in this case h1) is reached. But I want it to be scrollable by the user.

I hope I made myself clear, it's kind of difficult to explain :)

Any ideas would be greatly appreciated.

回答1:

You could try to replace JQuery Wayppints with JQuery ScrollToFixed. Their Full demo is just gorgeous. I think it does exactly what you're looking for.

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

来源：https://stackoverflow.com/questions/17989439/reverse-sticky-header