Tag: sticky

得到一个粘性标题“推高”，就像使用CSS和jQuery的Instagram的iPhone应用程序

Instagram的应用程序有一个很好的粘头，推动当前的一个，而不是新的。 我发现了一个很好的教程，如何为Android本身做到这一点，但我期待着用JavaScript和CSS做到这一点。 我能够得到我的标题，以换一个新的，但我似乎无法find一种模仿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()) { […]