可以用于滚动到一定距离以后让他实现定位效果。

比如滚动到50px的时候让导航栏固定定位。

用法：给最外层的div设置绝对定位

然后要固定的div设置position：sticky;

top：0；

这样就实现了滚动到一定距离固定定位的效果。

sticky用法的更多相关文章

  1. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  2. CSS布局技巧 -- sticky属性

    在一些很长的表格中,往往需要使用表头悬浮的设计以方便用户使用,例如H5电商页面通过下滑展示大量商品列表时,顶部的导航栏需要在离开屏幕时,需要固定在屏幕顶部以方便用户筛选类别.这种效果一直以来需要通过J ...

  3. CSS3的position:sticky介绍

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  4. setuid、setgid、sticky的权限简单用法

    如何设置setuid.setgid.sticky的权限: setuid :置于 u 的 x 位,原位置有执行权限,就置为 s,没有了为 S . chmod 4xxx file chmod u+s xx ...

  5. linux的strace命令用法

    strace命令用法 调用:strace [ -dffhiqrtttTvxx ] [ -acolumn ] [ -eexpr ] …[ -ofile ] [ -ppid ] … [ -sstrsize ...

  6. 粘滞位（sticky bit）

    linux特殊权限:setUid, setGid, 粘着位(sticky) (1)目录的X权限(执行) 文件的可执行权限很简单,也就是可否执行它的意思,但目录的执行权限又代表什么意思呢? 当然不可能是 ...

  7. Shell语法中的test命令用法

    test命令用法.功能:检查文件和比较值   1)判断表达式 if test (表达式为真) if test !表达式为假 test 表达式1 –a 表达式2 两个表达式都为真 test 表达式1 – ...

  8. perl的一些基本用法

    ReadLine support available (try 'install Bundle::CPAN')cpan>进入cpan的shell,好了,我为了安装spamassassin,需要安 ...

  9. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

随机推荐

  1. C语言I作业12——学习总结

    1.我学到的内容 二.我的收获 作业 链接 第一次作业 https://www.cnblogs.com/liuxiangjiang/p/11579877.html 第二次作业 https://www. ...

  2. JavaSE编码试题强化练习5

    1.不使用函数实现字符串的翻转 /** * 1.不使用函数实现字符串的翻转 */ public class TestStringReverse { public static void main(St ...

  3. Soap从入门到实战

    Soap从入门到实战 参考文章:https://howtodoinjava.com/spring-boot/spring-soap-client-webservicetemplate/ 使用的技术:s ...

  4. Java-Lambda表达式第一篇认识Lambda表达式

    1.Lambda表达式时Java 8新增的特性.Lambda表达式支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码创建只有一个抽象方法的接口(即函数式接口)的实例. 2.当使用Lamb ...

  5. 洛谷 - P4114 - Qtree1 - 重链剖分

    https://www.luogu.org/problem/P4114 维护边权的话,用深度大的点表示这条边(可以遍历一边边询问两端深度,这样不需要修改dfs1,也可以在dfs1的时候向下走的同时把边 ...

  6. 前端写代码自动刷新神器Browsersync

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试 ...

  7. 攻防世界--ReverseMe-120

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/a5c0e8322d9645468befabddfe0cb51d.exe 1.准备 获取 ...

  8. WannaCry的UWP版，哈哈哈

  9. [书接上一回]在Oracle Enterprise Linux (v5.7) 中安装DB - (4/4)

    选择自己创建的安装数据库路径. Sample Schemas 打钩. 调整内存大小. 选择官方建议的字符集编码. 是否创建创建的脚本,如需要请打钩. 脚本生成成功. 创建成功,如需要,则可以管理数据库 ...

  10. union 横向组合

    select sum(zs) zs,sum(zl) zl,sum(ts) ts,sum(lxcbw) lxcbw,sum(bz) bz,sum(sfzqt) sfzqtfrom (select cou ...