吸顶交互效果介绍
你可能听说过那个叫“吸顶”的东西？就是页面滑动到角落时，标题会安静地贴着屏幕边缘的那种效果，这个设计既能告诉你现在在哪儿，还能提升你的使用感受。在 HTML5 里，搞这个吸顶功能可是靠 scrollTop（页面滑动了多少）和 offsetTop（标题离页面顶部有多远）这两个值来决定标题的 position（到底怎么放置）属性为 fixed。这样，标题就能随页面滚动而稳定地放在屏幕最上面！
scrollTop和offsetTop属性
想要搞定吸顶效果，得先弄懂scrollTop和offsetTop是啥意思。scrollTop就是向下滑到底部后盖住的那块区域的高度；offsetTop则是当前元素距离它上级元素最上面那点的垂直距离，不管页面有没有滑动条都一样。找他们俩的差值就能知道标题需不需要固定在网页上方了。
实现上下滑动效果
咱们来聊聊网页滑动的事儿，当往上拉时，只需要看scrollTop是不是比offsetTop大就行了，如果是的，那就让页面顶部的标题定位在屏幕最上头，而且位置固定住；要是往下滑？那就要根据实际需求来设定，避免出现让人感觉好别扭的情况。
判断上下滑动方向
要想让页面滑起来顺手点，得先判断下拉/上拉。你需要在程序里设置个监控scroll事件的机制，然后分析下现在的scrollTop和上次的有什么变化，如果发现后者比前者多了那就是页面往上拉了；反之，就是往下。之后，就可以相应地设置标题的位置属性，实现更流畅的吸顶效果。
优化scroll事件性能
想要让页面支持吸顶效果，就得用scroll事件来监控~但是如果过于频繁地触发这个事件，容易影响页面速度。所以，咱们可以用个叫”节流函数”的东西来控制回调函数的执行次数，防止因频繁计算而拖慢速度。这样就能避免没必要的运算和渲染，提高页面流畅度了，同时也能保证住用户体验
if (fixedDom[0].offsetTop - elementScrollTop < 0){
fixedDom.addClass("road-tab-fixed")
}else {
fixedDom.removeClass("road-tab-fixed")
}
结合CSS过渡效果
别只用JavaScript搞吸顶！你还能搭上CSS过渡这个小伙伴，让整个吸顶变得更自然、更好玩。当你把标题变成固定的时候，加上过渡效果，就能看到一个丝滑的动画，直接提高了整个画面的感觉和用户眼缘，你会发现和你的网站互动起来也变得更有趣了！
响应式设计考虑
在吸顶效果设计中，要注意响应式设计！不同设备尺寸、分辨率不同，所以在手机或者平板上的字体吸顶效果可能得适当调整下，才能保证在每种设备上都能看起来舒服顺眼、使用方便。在写CSS样式时，别忘了考虑到这个要求，让吸顶功能无论在哪儿都能用、好用就行。
兼容性处理及浏览器适配
还有就是开发时候得考虑那些浏览器对那个position: fixed属性的支持程度和遇到的兼容性问题。有的浏览器可能会出点bug或者有偏差的地方，所以要记得调整一下，保证我们的浮动工具栏在各种常见的浏览器里都能用起来！
实际项目应用场景
最后说下，这篇文章也会讲到一些实际生活中的真实例子，比如吸顶功能在新闻网，博客那些长期要读的地方怎么用。这样大家看起来方便点，也能提高阅读速度。
if(beforeElementScrollTop - elementScrollTop <=0){//up
console.log('up');
if (beforeOffsetTop - elementScrollTop = 0){
fixedDom.removeClass("road-tab-fixed")
}
}
评论0