Javascript 创建一个类似于Chrome for Android的标题

我有一个固定标题的移动优化网站。我正在考虑以类似于Android版Chrome的方式在标题中实现一个消失功能

这种行为的要点是，当用户向上滚动时，标题会随着内容逐渐消失，然后在向上滚动时逐渐重新出现，这与用户的回答不同，后者的标题会完全出现/消失

我当前的标题如下所示：

@导入url（'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css');
@导入url（'https://fonts.googleapis.com/icon?family=Material+图标“）；
标题{
位置：固定；
排名：0；
宽度：100%；
}
标题导航{
盒影：无！重要；
}
#内容{
利润上限：56px；
填充：10px；
背景:#f5；
}

背景


这是网站其余部分的位置；内容应该是



Don&rsquo；我不介意，只需添加几行空白就可以滚动&hellip

解决方案相当简单：存储滚动位置，在

上收听

滚动

事件（或者，一般来说，无论最上面的可滚动容器是什么），检查位置是否增加或减少，然后执行适当的操作（增加/减少标题的顶部

顶部

）

Math.min

和

Math.max

是防止标题在屏幕上沿任意方向飞行所必需的。它们限制“顶”值，使其隐藏在视口的正上方或固定在顶部

这是一个有效的演示：

（函数（$）{
var$html=$（'html'），
$header=$（'header'），
lastScrollTop=$html.scrollTop（）；
var discosearingheaderhandler=函数（）{
var scrollTop=$html.scrollTop（），
headerHeight=$header.outerHeight（），
headerTop=parseInt（$header.css（'top'），10）；
$header.css（'top'，
scrollTop>lastScrollTop
？数学最大值（-headerHeight，headerTop-（scrollTop-lastScrollTop））
：Math.min（0，headerTop+（lastScrollTop-scrollTop））
);
lastScrollTop=scrollTop；
};
$（窗口）.on（'scroll'，discosearingheaderhandler）；
使人失望的领头人；
})（jQuery）
@导入url（'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css');
@导入url（'https://fonts.googleapis.com/icon?family=Material+图标“）；
标题{
位置：固定；
排名：0；
宽度：100%；
}
标题导航{
盒影：无！重要；
}
#内容{
利润上限：56px；
填充：10px；
背景:#f5；
}


背景


这是网站其余部分的位置；内容应该是




Don&rsquo；我不介意，只需添加几行空白就可以滚动&hellip