position:sticky是真的棒,牛批!!!

介绍什么的也就不多说了。张鑫旭大神已经介绍的非常清楚了。
地址:position:sticky介绍

这里就上几张图片(gif太不好制作了),对比一下使用fixed和sticky的区别。

position:sticky是真的棒,牛批!!!_第1张图片
position:sticky是真的棒,牛批!!!_第2张图片

	position: fixed;
    top: 80px;
    right: 15px;
    width: 32%;

通过fixed固定的,无论页面怎么滚动距离都不会变,页面滚动之后留下不舒服的大空隙
position:sticky是真的棒,牛批!!!_第3张图片

position:sticky是真的棒,牛批!!!_第4张图片

	position: sticky;
    top: 0;
    right: 15px;
    width: 32%;

通过sticky设置之后,页面开始正常布局,当页面开始滚动之后,就会根据设置的top值,进行设定

各位如果看到这里,真的希望您亲自试试,我反正感觉有了这个东西,仿佛打开了新世界的大门,这玩意这么6,CSS就能搞定的事儿,何必使用js来实现。

你可能感兴趣的:(css)