html简单响应式滚动条置顶-优快云博客

本文介绍了一种实现网页中滚动条置顶效果的方法。通过CSS样式设置header为fixed定位并固定在顶部，同时调整Group盒子的margin-top值来确保其内容不会被header遮挡。配合JavaScript控制scrollTop值，使得滚动条在到达header高度时停止滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单响应式滚动条置顶

一般的，让页面出现滚动条的常见方法有：

overflow:auto||overflow:scroll
或者overflow-x水平滚动条和overflow-y垂直滚动条

那么现在要实现这样的一个效果：

直接在body中给一个header，后面一个Group盒子，并且header为常驻顶部的，实现滚动条顶部位置不滚动到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 || document.body.scrollTop