position:sticky介绍

栏目: CSS · 发布时间: 7年前

内容简介：整理自：中文原文：请尊重版权，转载请注明来源，多谢～～

整理自： STICK YOUR LANDINGS! POSITION: STICKY LANDS IN WEBKIT

请尊重版权，转载请注明来源，多谢～～

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

position:sticky用法

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

使用起来也非常简单：

.sticky {
  position: -webkit-sticky;
  position:sticky;
  top: 15px;
}

目前来说还需要用私有前缀～～

浏览器兼容性：

由于这是一个全新的属性，以至于到现在都没有一个规范， W3C也刚刚开始讨论它，而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。

另外需要注意的是，如果同时定义了left和right值，那么left生效，right会无效，同样，同时定义了top和bottom，top赢～～

fall back

虽然其它浏览器尚不支持，但是实现起来其实不难，我们可以用js简单实现：

HTML

<div class="header"></div>

CSS

.sticky {
  position: fixed;
  top: 0;
}
.header {
  width: 100%;
  background: #F6D565;
  padding: 25px 0;
}

JS

var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
 
function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}
 
document.addEventListener('scroll', onScroll);

这里是一个简单的demo 。

嗯，对于前端来说，新技术用于提升用户体验才能体现其价值～～

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

An Introduction to Probability Theory and Its Applications

William Feller / Wiley / 1991-1-1 / USD 120.00

Major changes in this edition include the substitution of probabilistic arguments for combinatorial artifices, and the addition of new sections on branching processes, Markov chains, and the De Moivre......一起来看看《An Introduction to Probability Theory and Its Applications》这本书的介绍吧!

码农工具