css吸顶效果,html置顶按钮
吸顶功能
顶吸是一种常见的交互效果。当页面滑出屏幕边界时，标题会自动贴在屏幕边缘提示用户。
基本原理
H5实现的基本原理是判断当前页面滑动距离scrollTop和标题到页面顶部的距离offsetTop的关系，然后设置标题位置=固定。这里你需要理解scrollTop和offsetTop属性的含义。
scrollTop
当有滚动条时，滚动条的向下滚动距离是元素顶部被覆盖部分的高度。当没有滚动条时，ScrollTop==0总是为真。px单位，可读可设置。
offsetTop
当前元素的顶部和最近的父元素的顶部之间的距离与滚动条的存在无关。单位px，只读元素。
因此，当scrolltop偏移时，title的位置=fixed，而top=0，使其固定在屏幕的顶部；当scrollTop offsetTop时，取消位置=固定，代码如下：
If (fixeddom [0])。offsettop-element scroll top 0){ fixed DOM . addclass( road-tab-fixed )} else { fixed DOM . remove class( road-tab-fixed )}具有以下效果：
优化
图为基本功能都实现的差不多了，但是感觉怪怪的。当页面向上滑动时，效果自然，但当页面向下滑动时，只有当页面完全滑动到顶部时，标题才会回到原来的位置，造成过度的不自然。所以titile的位置设置要分上下滑动两种情况。
判断上下滑动方向
通过上下滑动判断点击这里。
当页面向上滑动时
scrolltopoffset时，title的位置=fixed，top=0，使其固定在屏幕顶部；
当页面向下滑动时
scrollTopoffsetTop时，取消固定属性，会使标题随页面一起下滑，交互更自然。
代码如下：
if(beforeElementScrollTop-elementScrollTop=0){//up console . log( up )；if(beforeOffsetTop-elements scroll top 0){ fixed DOM . add class( road-tab-fixed )} } else { console . log( down )；//console . log( beforeOffsetTop-，beforeOffsetTop)；//console . log( elements scroll top-，elements scroll top)；If(在offset-element scroll top=0之前){ fixed DOM . remove class( road-tab-fixed )} }具有以下效果：
优化之scroll节流
当页面被监视滚动事件时，滚动的回调将总是在滑动时执行，这将影响页面的性能。然而，节流只允许函数在x毫秒内执行一次。只有在执行了上一个函数之后，经过了您指定的时间间隔，才能进行下一次函数调用。代码如下所示
const fixedDom=$(#road-tab )，isIos=utils.getMobileType()，tab class= road-tab-fixed ；设beforelementscrolltop=0；let beforeOffsetTop=fixedDom[0].offsetTop//滚动节流const throttle=(func，wait，mustRun)={ var timeout，start time=new Date()；return function(){ var context=this，args=arguments，curTime=new Date()clear time out(超时)//如果达到了规定的触发时间间隔，触发处理程序if(curTime-start time=必须运行){ beforelementscrolltop=document。身体。scrolltop控制台。日志( beforelementScrollTop-)，文档。身体。scroll top)；func.apply(context，args)；startTime=curTime //没达到触发间隔，重新设定定时器}else{ timeout=setTimeout(func，wait)} } } const winScroll=(e)={ const elements scroll top=document。身体。滚动顶部；console.log(elementScrollTop -，elements croll top)；if(beforeElementScrollTop-elementScrollTop=0){//up控制台。日志(“向上”)；if(beforeOffsetTop-elements scroll top 0){ fixed DOM。add class( road-tab-fixed )} } else { if(before offsettop-elements scroll top=0){ console。日志(“UUUUUU”)；固定DOM。删除类( road-tab-fixed )} }；$(窗口)。关闭("滚动")。on(scroll ，throttle(winScroll，10，100))；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。