html简单响应式滚动条置顶

简单响应式滚动条置顶

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

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

html简单响应式滚动条置顶相关推荐

html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
纯 CSS 中的简单响应式汉堡菜单
欢迎阅读有关如何创建简单的响应式纯 CSS 汉堡菜单的教程.是的,互联网上有很多其他的汉堡菜单,但其中一些仍然需要使用 Javascript.所以这里是一个纯 CSS 驱动的菜单,而不是一行 Java ...
minui点击分页控件后滚动条置顶
需求:当点击miniui的分页控件后(上一页.下一页.第一页.最后一页)后要求若滚动条没有置顶则自动置顶解决方案之一: 通过百度发现js有自带的方法可以设置滚动条的位置具体如下: window.sc ...
弹出框每次打开滚动条置顶_微信置顶文字怎么弄？微信置顶一句话教程
今日支付宝红包支付宝首页搜索511501453 马上领取红包 (支付宝双十二活动,瓜分15亿红包) (领取后一定要记得使用,不然会浪费的呦, 更会影响第二天的领取!) 奶思靓机 " 一个 ...
html 滚动条置顶,css怎么设置网页下拉条（滚动条）样式？
很多朋友在网页设计中要自定义下拉条(滚动条)样式的情景,下拉条的样式我们可以通过css来控制的,下拉条能不能换颜色或者做的更好看一些呢?那么滚动条的设置都有哪些呢?下面本篇文章来介绍一下设置下拉条(滚 ...
# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）
关于学习自上次写博客已过了1个月左右时间.当时刚看完html继续学习css中. 而现在也接触到了jquery的一些东西(虽然大佬们都说jquery已过时,不过拿来入手应该不错).于是这一个月在学这些 ...
vue2+ts中表格Ref滚动条置顶写法scrollTop = 0；
写法还是与js有点区别的,但区别不大 (this.$refs.tableRef as any).bodyWrapper.scrollTop = 0;
简单响应式Bootstrap框架中文官网页面模板
链接:http://pan.baidu.com/s/1o7MQ6RC 密码:kee5 转载于:https://www.cnblogs.com/wordblog/p/6804761.html
前端地图可视化（arcgis）（简单响应式）--中国地形图，高铁城市数据
项目截图

html简单响应式滚动条置顶

简单响应式滚动条置顶

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

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

分析：

最终效果：

html简单响应式滚动条置顶相关推荐

最新文章

热门文章