1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .top {
  14.             width: 100%;
  15.             height: 1000px;
  16.             background-color: #ccc;
  17.         }
  18.         .header {
  19.             width: 100%;
  20.             line-height: 80px;
  21.             background-color: #999;
  22.             position: sticky; /*关键属性*/
  23.             top: 0; /*设定固定位置*/
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="top">
  29.         这是测试文字
  30.     </div>
  31.     <div class="header">
  32.         这是要固定的导航
  33.     </div>
  34.     <div class="top">
  35.         这是测试文字
  36.     </div>
  37.     <p>文字</p>
  38. </body>
  39. </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. 明远imx6

    http://pan.baidu.com/s/1ntsrQtF#path=%252FMY-I.MX6%2520V2.5 nkuc tftpboot 0x10800000 uImage.ramdisk ...

  2. Docker容器技术-基础与架构

    一.什么是容器 容器是对应用程序及其依赖关系的封装. 1.容器的优点 容器与主机的操作系统共享资源,提高了效率,性能损耗低 容器具有可移植性 容器是轻量的,可同时运行数十个容器,模拟分布式系统 不必花 ...

  3. DNS 介绍

    DNS 介绍 DNS 为 Domain Name System (域名系统的缩写),它是一种将ip地址转换为对应的主机名或将主机名转换成与之对应的ip地址的一种服务机制.DNS使用TCP和UDP,端口 ...

  4. PHP封装时间类

    开发中经常用到时间的一些操作,比如昨天,今天,前天,近七天,一周等等. class time{ private $year;//年 private $month;//月 private $day;// ...

  5. 在shell，R，python中用变量和常量创建文件名

    很多时候我们希望文件名的格式是:变量+常量的. 1.shell:变量"常量" [wangjq@mgmt multi_pcr]$ a="var" [wangjq@ ...

  6. php数组函数-array_diff()

    array_diff()函数返回两个数组的差集数组.该数组包括了所有在被比较数组中,但是不在任何其他参数数组中的键值在返回数组中,键名保持不变. array_diff(array1,array2,ar ...

  7. Go Log模块生成日志文件

    使用log模块示例代码: package main import ( "fmt" "time" "log" "os" ) ...

  8. ceph安装各种报错

    [ceph_deploy][ERROR ] RuntimeError: Failed to execute command: ceph-disk-activate –mark-init sysvini ...

  9. streambase一些疑难杂症

    1.webserverReqest控件接收不到换行符\r\n 方案一:这个在streambase7.6.7没有办法处理,只有在streambase7.7.4中才有办法处理,在这个版本中出现了Reque ...

  10. ZooKeeper服务-一致性、实现

    实现 ZooKeeper服务有两种不同的运行模式.一种是“独立模式”(standalone mode),即只有一个ZooKeeper服务器.这种模式比较简单,适合于测试环境,但是不能保证高可用性和可恢 ...