在 facebook 的 iphone 应用程序上,当向下滚动时,标题栏会缩小并 Conceal 。当向上滚动时,它会再次显示。
我想复制这个,但也添加另一个 div 来跟进。
我创建了一个简单的 fiddle 来展示我到目前为止所做的尝试:
http://jsfiddle.net/0z6tqqyk/2/
但是,当在初始页面加载时向下滚动时,操作工作正常。但是当向上滚动时,在动画发生之前会有延迟。
再次向下滚动时,会有延迟。 对实现我的目标有什么帮助吗?
var lastScrollTop = 0;
$("#container").scroll(function(event) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
$("#header").animate({
'marginTop': '-40px'
}, 200);
$("#title").animate({
'marginTop': '0'
}, 200);
} else {
$("#header").animate({
'marginTop': '0'
}, 200);
$("#title").animate({
'marginTop': '40px'
}, 200);
}
lastScrollTop = st;
});
最佳答案
你有动画添加和搞乱时间使用.stop()添加新动画之前的 API。
经过一些测试:这个配置似乎是最一致的:
$("#header").stop(true, false).animate({ 'marginTop': '-40px'}, 100);
$("#title").stop(true, false).animate({ 'marginTop': '0'}, 100);
关于jquery - facebook 应用样式 向下滚动时 Conceal 标题栏,向上滚动时再次显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26408275/