用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky
为此而生。
position:sticky
用法
position:sticky
是一个新的css3属性,它的表现类似 position:relative
和 position:fixed
的合体,在目标区域在屏幕中可见时,它的行为就像 position:relative
; 而当页面滚动超出目标区域时,它的表现就像 position:fixed
,它会固定在目标位置。
使用起来也非常简单:
.sticky {
position: -webkit-sticky;
position:sticky;
top: 15px;
}
目前来说还需要用私有前缀
浏览器兼容性:
由于这是一个全新的属性,以至于到现在都没有一个规范。
Chrome已经不再支持sticky属性,Safari 从 6.1开始支持,但表现也不太完美,Firefox 从版本 32开始支持了。IE一直不支持。
另外需要注意的是,如果同时定义了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);
时间: 2024-10-21 14:16:31