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

比如滚动到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. Mybatis-学习笔记（1）SqlSessionFactory、SqlSession、Mybatis配置文件configuration的属性标签

    1.mybatis引入项目,只需要引入mybatis-x.x.x.jar包即可. (当然数据库驱动的引入必不可少) 2.SqlSessionFactory 由SqlSessionFactoryBuil ...

  2. hive Hbase sql

    Hive和HBase的区别 ​ hive是为了简化编写MapReduce程序而生的,使用MapReduce做过数据分析的人都知道,很多分析程序除业务逻辑不同外,程序流程基本一样.在这种情况下,就需要h ...

  3. dfs（首尾字母）

    http://acm.hdu.edu.cn/showproblem.php?pid=1181 变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  4. Djaon 基于 Ajax 的 json 数据传输

    关键参数:contentType:"application/json" data:JSON.stringify({ json数据 }) 再views.py中,使用request.d ...

  5. $.ajax()方法详解（网上引用）

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  6. Asp.net中GridView使用详解(很全，很经典)

    http://blog.csdn.net/hello_world_wusu/article/details/4052844 Asp.net中GridView使用详解 效果图参考:http://hi.b ...

  7. 攻防世界--srm-50

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

  8. C++ 数组动态分配

    数组的动态内存分配 #include <iostream> //一维数组 void oneDimensionalArray() { //定义一个长度为10的数组 int* array = ...

  9. vue 一个轮播的组件

    当我们进行开发的时候,并不是说所有信息都会在写一个组件中 作为项目的老大,我们要去思考每个文件下面需要放什么业务,分的越细.越合理为好 我们在componts文件下新建一个Banner.vue 组件 ...

  10. JavaScript基础9——操作DOM树

    appendChild()方法:添加子节点到末尾 类似于剪切粘贴的效果   insertBefore(newNode, oldNode)方法:在某个节点之前插入一个节点 newNode为要插入的节点, ...