当前位置: 首页 > Web前端 > CSS

htmlsimpleresponsivescrollbarontop

时间:2023-03-31 11:17:23 CSS

simpleresponsivescrollbarontop一般让页面出现滚动条的常用方法有:overflow:auto||overflow:scroll或者overflow-x水平滚动条和overflow-yverticalscroll那么现在我们需要实现这样一个效果:直接在body中给一个header,后面跟着一个Groupbox,header常驻在顶部,这样滚动条的top位置就不会滚动到header中(包含在header中会影响美观)先看例子:分析:每当滚动条移动到header高度时,框前排的内容不显示,但滚动条要停在这里。那么盒子首先需要设置一个margin-top:header的高度,以及定位top的值。在js中也控制了scrollTop的值,当滚动条移动到容器顶部时固定header{position:fixed;top:0;left:0;right:0;z-index:999;}#con{margin-top:150px;position:absolute;top:50px;}最终效果:js获取屏幕滚动条:document.documentElement.scrollTop||文件.body.scrollTop