L'Instagram app a un joli collant en-tête qui pousse le courant jusqu'à la place de la nouvelle. J'ai trouvé un tutoriel sur la façon de le faire en natif pour Android, mais je suis à la recherche de le faire avec du JavaScript et du CSS.
J'ai pu obtenir mon en-tête de passer pour un nouveau, mais je n'arrive pas à trouver un moyen de reproduire la façon Instagram t-il. Toute aide est grandement appréciée.
*Edit: j'ai été en mesure d'obtenir l'en-tête de bâton vers le haut de la page lorsque vous faites défiler à l'aide des waypoints comme Cj dans les commentaires souligné. (lien vers waypoints). La principale question que je vais avoir c'est d'obtenir le "push up" effet que instagram utilise dans son application mobile pour iPhone. Je voudrais un lien pour un exemple, mais je ne l'ai jamais vu utilisé avant.*
**Edit 2: en Utilisant des pièces de la codepen que @Chris a apporté, j'ai été en mesure d'obtenir les en-têtes de bâton. J'ai ensuite ajouté un .slideUp effet. Mon problème maintenant est d'obtenir l' .slideUp effet de se produire seulement lorsque l'en-tête suivant est atteint. Droit maintenant, l'effet s'active sur parchemin.
Voici le code:
(function() {
function stickyTitles(stickies) {
this.load = function() {
stickies.each(function(){
var thisSticky = jQuery(this);
jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
});
}
this.scroll = function() {
stickies.each(function(){
var thisSticky = jQuery(this),
pos = jQuery.data(thisSticky[0], 'pos');
if (pos <= jQuery(window).scrollTop()) {
thisSticky.addClass("fixed");
// added this
$(".followMeBar:parent").slideUp();
} else {
thisSticky.removeClass("fixed");
}
});
}
}
jQuery(document).ready(function(){
var newStickies = new stickyTitles(jQuery(".followMeBar"));
newStickies.load();
jQuery(window).on("scroll", function() {
newStickies.scroll();
});
});
})();