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

比如滚动到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. python基础循环语句练习

    1.使用while循环输入 1 2 3 4 5 6     8 9 10 n = 1 while n < 11: if n == 7: pass else: print(n) n = n + 1 ...

  2. Java多态性应用——多态数组、多态参数

    多态数组: Person[] person = {new Person("张三", 32), new Student("李四", 21, 120, 90.0), ...

  3. Vue源码解读之Dep,Observer和Watcher

    在解读Dep,Observer和Watcher之前,首先我去了解了一下Vue的数据双向绑定,即MVVM,学习于:https://blog.csdn.net/u013321...以及关于Observer ...

  4. wxpython菜单栏、子菜单栏、弹出菜单栏、状态栏小程序学习源代码分享

    #coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...

  5. Vue slot-scope的理解（适合初学者）

    百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOC ...

  6. Vue+Element-Ui 异步表单效验

    简单的效验 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名 /* ruleForm :表单绑定的数 ...

  7. org.hibernate.hql.ast.QuerySyntaxException: tb_voteoption is not mapped [from tb_voteoption where voteID=?]

    转自:https://www.cnblogs.com/albert1017/archive/2012/08/25/2656873.html org.hibernate.hql.ast.QuerySyn ...

  8. load 和 initialize 的区别

    官方文档 Apple的官方文档很清楚地说明了 initialize 和 load 的区别在于: load 是只要类所在文件被引用就会被调用,而 initialize 是在类或者其子类的第一个方法被调用 ...

  9. .h与.cpp

    本质上没什么区别. cpp:c plus plus,就表示为c++原文件. .h文件实现的功能是声明.cpp文件中需要使用的变量.函数及宏定义等. .h文件就像是一个接口,具体的实现可以在.cpp中, ...

  10. 【LeetCode】位运算 bit manipulation（共32题）

    [78]Subsets 给了一个 distinct 的数组,返回它所有的子集. Example: Input: nums = [,,] Output: [ [], [], [], [,,], [,], ...