怎么查看网站disallow,黄山网站seo,wordpress表格制作,先做网站先备案在开发时#xff0c;经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候#xff0c;让一部分内容作为navbar#xff0c;也就是置顶显示#xff0c;我们一般会使用js监听scroll事件来实现#xff0c;但是新增的css3属性position:sticky可以简单实现#xff0c;省去…在开发时经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候让一部分内容作为navbar也就是置顶显示我们一般会使用js监听scroll事件来实现但是新增的css3属性position:sticky可以简单实现省去了繁琐的计算 position的含义是指定位类型取值类型可以有static、relative、absolute、fixed、inherit和sticky这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性
position:sticky用法
position:sticky 被称为粘性定位元素stickily positioned element是计算后位置属性为 sticky 的元素。 简单的理解就是在目标区域以内它的行为就像 position:relative;在滑动过程中某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top100px)position:sticky这时的效果相当于fixed定位固定到适当位置。 可以说是相对定位relative和固定定位fixed的结合 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素如果祖先元素都不可以滚动那么是相对于viewport来计算元素的偏移量。 position:sticky 使用条件
1、必须指定top、bottom、left、right 4个值之一否则只会处于相对定位 2、sticky元素仅在其父元素内生效
示例 我设置当左侧滚动一个格子后2定位在上方右侧自然滚动
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody,html,.box {width: 100%;height: 100%;}.box {font-size: 20px;overflow: auto;display: flex;}.left {width: 200px;position: sticky;top: -320px;}.left-box {width: 200px;height: 300px;background-color: #ccc;margin-bottom: 20px;}.right {margin-left: 20px;flex: 1;}.right-box {width: 100%;height: 300px;margin-bottom: 20px;background-color: forestgreen;}/style
/head
body
div classboxdiv classleftdiv classleft-box1/divdiv classleft-box2/divdiv classleft-box3/divdiv classleft-box4/div/divdiv classrightdiv classright-box1/divdiv classright-box2/divdiv classright-box3/divdiv classright-box4/divdiv classright-box5/divdiv classright-box6/divdiv classright-box7/divdiv classright-box8/divdiv classright-box9/divdiv classright-box10/divdiv classright-box11/divdiv classright-box12/div/div
/div
/body
/html在web开发中注意兼容性
sticky目前仍是一个试验性的属性并不是W3C推荐的标准。它之所以会出现也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari
