Приложение Instagram имеет приятный липкий заголовок, который подталкивает текущий вместо нового. Я нашел отличный учебник о том, как это сделать для Android, но я ищу его с помощью JavaScript и CSS.
Мне удалось заставить мой заголовок переключиться на новый, но я не могу найти способ подражать тому, как это делает Instagram. Любая помощь приветствуется.
* Изменить: Я смог получить заголовок, чтобы придерживаться верхней части страницы при прокрутке с использованием путевых точек как Cj в комментариях. (ссылка на путевые точки). Основная проблема, с которой я сталкиваюсь, - получить эффект "push up", который использует instagram в своем мобильном приложении для iPhone. Я бы связался с примером, но я никогда не видел его раньше. *
* * Редактировать 2: Используя части кода, предоставленные @Chris, я смог получить заголовки. Затем я добавил эффект .slideUp. Моя проблема теперь заключается в том, что эффект .slideUp возникает только при достижении следующего заголовка. В настоящий момент эффект активируется при прокрутке.
Вот код:
(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();
});
});
})();
