sticky list item

滚动到某一个具体的目录下时，目录就会定位在左上角。

代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {box-sizing: border-box;}body {font: bold 18px/21px Helvetica, Arial, sans-serif;}p {font-weight: normal;background: #FFF59D;padding: .8em;}a {color: #07c;}dl {margin: 0;padding: 24px 0 0 0;}dt {background: #B8C1C8;border-bottom: 1px solid #989EA4;border-top: 1px solid #717D85;color: #FFF;margin: 0;padding: 2px 0 0 12px;position: -webkit-sticky;position: sticky;top: -1px;}dd {font: bold 20px/45px Helvetica, Arial, sans-serif;margin: 0;padding: 0 0 0 12px;white-space: nowrap;}dd + dd {border-top: 1px solid #CCC}</style></head><body><p>This is the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning" target="_blank">demo from MDN</a>. CSS <code>position: sticky</code> is supported in Firefox, Safari, and Chrome Canary (56+).</p><hr /><div><dl><dt>A</dt><dd>Andrew W.K.</dd><dd>Apparat</dd><dd>Arcade Fire</dd><dd>At The Drive-In</dd><dd>Aziz Ansari</dd></dl><dl><dt>C</dt><dd>Chromeo</dd><dd>Common</dd><dd>Converge</dd><dd>Crystal Castles</dd><dd>Cursive</dd></dl><dl><dt>E</dt><dd>Explosions In The Sky</dd></dl><dl><dt>T</dt><dd>Ted Leo & The Pharmacists</dd><dd>T-Pain</dd><dd>Thrice</dd><dd>TV On The Radio</dd><dd>Two Gallants</dd></dl></div></body></html>
复制代码

sticky list item相关推荐

移动端vant时间选择器_vue移动端组件库（vant）
[摘要]在vue中有许多组件库,vant就是一套主要为移动端网站开发的开源的移动端组件库... [作者:黄可毅] 一.vant安装以及使用经历 1.vant安装在Vue 2 项目,安装 Vant 2 ...
Session Sticky
ginx hmux与resin(3.0版本) session sticky的结合下载:svn checkout http://nginx-upstream-jvm-route.googlecode. ...
tab吸顶功能实现，css实现沾性吸顶，sticky实现吸顶，解决sticky吸顶失效
吸顶效果 1.结构部分 <view class="tab_box"><view:class="{ active: curIndex === index ...
position:sticky；粘性布局
生效规则 position:sticky 的生效是有一定的限制的,总结如下: 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效.否则其行为与相对定位相同 ...
Python:Item Pipeline
当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline都是实现了简单方法的Pyth ...
Android ListView 点击item改变item的背景颜色(ListView实现光标移动)
一下demo 地址实现的效果图如下 ListView 光标移动,实现很是简单,这里是指item背景的改变使用 listSelector listSelector 用户指定当前选中item 的颜色 ...
Android ListView item设置分割线以及分割线宽度
ListView item设置分割线的方法:setDivider ListView item设置分割线宽度的方法:setDividerHeight // 设置分割线 listView.setDivid ...
RecyclerView 删除Item 以及删除整个RecyclerView
学而时习之,温故而知新. 今天用到了,居然忘记了,好尴尬,这里深夜了也在记录下, 1 删除整个RecyclerView hisList.clear();hisAdapter.notifyDataSet ...
RecyclerView 点击Item 改变文字颜色以及所在的背景色
为了防止看错内容,下面讲解要实现的内容方法有很多中,这里使用notifyDataSetChanged 来刷新内容个人感觉更为简单点首先可以先定义一个位置,然后点击item的时候把positon 赋 ...

sticky list item

sticky list item相关推荐

最新文章

热门文章