Jquery Iphone/Android 滚动固定标题?
在 iPhone 和 Android 上的联系人中,当您向下滚动到 B 时,标题“B”固定在可滚动窗口的顶部,直到您向下滚动到 C 标题,当您到达 C 标题时,它会替换B 标题,因此如果一个人查看他的 200 个 E 联系人之一,他就知道自己位于 E 部分。这有道理吗?当标题到达窗口顶部时,它会粘住并保持固定,直到窗口顶部滚动到下一个标题,在这种情况下,当标题顶部到达窗口顶部时,新标题将替换它,等等,
$(window).scroll(function() {
var title_top = $('h2').top()
var window_top = $(window).top()
if (title_top <= window_top) {
$('h2').css({position:'fixed', top:'0'});
} else {
$(this).css({position:'static'});
}
});
或者?
$(window).scroll(function() {
if ($(window).scrollTop < $('H2').offset().top) {
alert('yay! awesome.')
} else {
$(this).css({position:'static'});
}
});
In the contacts on both iphone and android, when you get down to the B's, the heading "B" is fixed to the top of the scrollable windows until you scroll down to the C heading, when you get to the C heading, it replaces the B heading, so if a person in looking at one of his 200 E contacts, he knows he's in the E section. does that make sense? when the heading hits the top of the window, it sticks and stays fixed until the top of the window is scrolled to the next heading, in which-case the new heading replaces it when the top of the heading reaches the top of the window, etc.
$(window).scroll(function() {
var title_top = $('h2').top()
var window_top = $(window).top()
if (title_top <= window_top) {
$('h2').css({position:'fixed', top:'0'});
} else {
$(this).css({position:'static'});
}
});
OR?
$(window).scroll(function() {
if ($(window).scrollTop < $('H2').offset().top) {
alert('yay! awesome.')
} else {
$(this).css({position:'static'});
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
Node.js 文档 使用类似的技术,我会查看他们的代码以获取一些想法。
Node.js documentation uses a similar technique, I'd check out their code for some ideas.
这是一个 jquery 脚本
http://jqueryfordesigners.com/iphone-like-sliding-headers/
几乎符合你的要求
That a jquery script
http://jqueryfordesigners.com/iphone-like-sliding-headers/
does almost that you asked for