html简单响应式滚动条置顶

daryl 发布于2019-08-21 16:43 / 2094人阅读

摘要：那么盒子首先就需要设置一个的高和定位的值在中也要控制值，通过判断滚动条移动到容器顶部时固定最终效果获取屏幕滚动条

简单响应式滚动条置顶 一般的，让页面出现滚动条的常见方法有：

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88647.html

html简单响应式滚动条置顶

摘要：那么盒子首先就需要设置一个的高和定位的值在中也要控制值，通过判断滚动条移动到容器顶部时固定最终效果获取屏幕滚动条简单响应式滚动条置顶一般的，让页面出现滚动条的常见方法有： overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在要实现这样的一个效果：直接在body中给一个header，后面一个Gr...

ranwu 2019-08-01 17:41 评论0 收藏0
html简单响应式滚动条置顶

摘要：那么盒子首先就需要设置一个的高和定位的值在中也要控制值，通过判断滚动条移动到容器顶部时固定最终效果获取屏幕滚动条简单响应式滚动条置顶一般的，让页面出现滚动条的常见方法有： overflow:auto||overflow:scroll 或者overflow-x水平滚动条和overflow-y垂直滚动条那么现在要实现这样的一个效果：直接在body中给一个header，后面一个Gr...

frolc 2019-08-30 15:53 评论0 收藏0
用sort实现orderby

摘要：工作到了这个年数感觉那些基本函数语法已经跟人合一了根本不会为操作一些数据结构而思考半天了在做小程序的时候遇到了个的场景结果发现没有以为的那么简单也许是之前不求甚解的原因那么现在来解决的问题问题的产生与探讨方向在小程序中有个将的某一条置顶的需工作到了这个年数, 感觉那些基本函数语法已经跟人合一了, 根本不会为操作一些数据结构而思考半天了. 在做小程序的时候遇到了个orderby的场景,...

jiekechoo 2019-08-23 14:14 评论0 收藏0
window.scrollTo()

摘要：方法工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。若有误，请斧正感谢 scrollTo方法工作上遇到了这样的场景，在聊天页面当用户刷新页面时滚动条置底。很简单对吧，大概如下范例： Title scrollTo(0, document.body.offsetHeight) 但时实际上这段代码并不能保证用户的每次刷新都能把滚动...

lscho 2019-08-21 17:32 评论0 收藏0
纯CSS响应式瀑布流 columns

摘要：效果图缩小一点板端鸡端疯六这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要什么的，我就懒，算了算了，不写了。效果图PC 1366*768showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad4b60c469301f);缩小一点showImg(https://user-gold-cdn.xitu.io/2019/...

番茄西红柿 2019-05-23 15:55 评论0 收藏0