<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .top {

            width: 100%;

            height: 1000px;

            background-color: #ccc;

        }

        .header {

            width: 100%;

            line-height: 80px;

            background-color: #999;

            position: sticky; /*关键属性*/

            top: 0; /*设定固定位置*/

        }

    </style>

</head>

<body>

    <div class="top">

        这是测试文字

    </div>

    <div class="header">

        这是要固定的导航

    </div>

    <div class="top">

        这是测试文字

    </div>

    <p>文字</p>

</body>

</html>

除了兼容性不太好之外，还是挺好用的。

position:sticky属性测试的更多相关文章

  1. 粘性固定属性 -- position:sticky

    概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...

  2. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  3. sticky -- position定位属性sticky值之粘性定位；

    sticky简述 sticky 是css定为新增的属性:可以说是相对定位relative和固定定位fixed的结合: 它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的 ...

  4. position: sticky 防坑指南

    position: sticky 防坑指南:https://www.jianshu.com/p/e217905e8b87 今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定, ...

  5. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

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

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

  7. position:sticky用法

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

  8. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  9. CSS3的position:sticky介绍

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

随机推荐

  1. Nginx 常见报错

    Nginx 常见报错 启动报错:[emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use) 原因:这个是nginx重启时经常遇到 ...

  2. 使用concurrent.futures和ProcessPoolExecutor来替代线程和进程

    concurrent.futures和ProcessPoolExecutor这两个类实现的借口分别在不同的线程或进程中执行可调用的对象,这两个类在内部维护者一个工作线程或进程池,以及要执行的队列,这两 ...

  3. 20165101刘天野 2017-2018-2 《Java程序设计》第8周学习总结

    #20165101刘天野 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十二章Java多线程机制 一.进程与线程 1.1.任务调动 大部分操作系统(如Wi ...

  4. MySQL备份账号权限

    grant select,show view,lock tables,trigger on confluence.* to 'DBbackup'@'127.0.0.1' identified by ' ...

  5. 全志H3-NanoPi开发板SDK之三编译流程【转】

    本文转载自:https://blog.csdn.net/yuesichiu/article/details/77600124 版权声明:本文为博主(宽简厚重,Yuesichiu)原创文章,未经博主允许 ...

  6. Prometheus Monitoring System & Time Series Database

    什么是 TSDB (Time Series Database): 我们可以简单的理解为.一个优化后用来处理时间序列数据的软件,并且数据中的数组是由时间进行索引的. 时间序列数据库的特点: 大部分时间都 ...

  7. ibecon后台运行

    程序被硬关闭后,只能执行这三个回调,而且必须写在appdelegate中,退出ibeacons信息区域时会有延时10秒左右,进入时无延时 - (void)locationManager:(CLLoca ...

  8. Struts2全局异常处理

    1.在struts.xml中配置全局异常处理 在Action中抛出异常,此异常可以是action自己抛的,也可以是Service抛出来的,都会跳转到全局异常中,只有在当前Action中配置域全局异常返 ...

  9. MSER最稳定极值区域源码分析

    最稳定极值区域介绍 如把灰度图看成高低起伏的地形图,其中灰度值看成海平面高度的话,MSER的作用就是在灰度图中找到符合条件的坑洼.条件为坑的最小高度,坑的大小,坑的倾斜程度,坑中如果已有小坑时大坑与小 ...

  10. jsp连接sqlServer数据库教程、jsp连接sqlServer数据库报ClassNotFoundException异常

    jsp连接sqlServer数据库教程: 首先讲下我用的工具版本以供参考: jar包:jtds1.3.1.jar  下载地址:点击进入 数据库:SQL Server2012 服务器:Tomcat8.0 ...