Instagram 应用程序有一个很好的粘性标题,可以将当前的标题推到新的位置。我找到了一个很棒的教程,介绍了如何为 Android 原生地执行此操作,但我希望使用 JavaScript 和 CSS 来执行此操作。
我能够让我的标题切换到一个新的标题,但我似乎无法找到一种方法来模仿 Instagram 的做法。任何帮助是极大的赞赏。
*编辑:在评论中指出的使用航点作为 Cj 滚动时,我能够让标题粘在页面顶部。(链接到航点)。我遇到的主要问题是获得 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();
});
});
})();