Instagram アプリには、新しいヘッダーの代わりに現在のヘッダーを押し上げる素敵なスティッキー ヘッダーがあります。これを Android でネイティブに行う方法についてのすばらしいチュートリアルを見つけましたが、JavaScript と CSS でそれを行うことを検討しています。
ヘッダーを新しいヘッダーに切り替えることはできましたが、Instagram の方法を模倣する方法が見つからないようです。どんな助けでも大歓迎です。
*編集：コメントで指摘されたCjとしてウェイポイントを使用してスクロールするときに、ヘッダーがページの上部にくっつくようにすることができました。(ウェイポイントへのリンク)。私が抱えている主な問題は、Instagram が iPhone 用のモバイルアプリで使用する「プッシュアップ」効果を得ることです。例にリンクしますが、これまでに使用されたことはありません。*
* *編集 2: @Chris が提供した codepen の一部を使用して、ヘッダーを貼り付けることができました。次に、.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();
});
});
})();