position:sticky布局

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

另外需要注意的是,如果同时定义了leftright值,那么left生效,right会无效,同样,同时定义了topbottomtop赢。

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

position:sticky布局的相关文章

粘性布局 position:sticky

今天在网上浏览时偶然发现原来CSS中的position属性除了有以下几个取值之外: static(默认) relative absolute fixed inhert 还有一个之前没见到的取值: sticky 没错= =就是它! sticky顾名思义粘性的,它的作用如下: 盒位置根据正常流计算,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响.当

position:sticky实现iOS6+下的粘性布局

position:sticky实现iOS6+下的粘性布局 使用 position: sticky 达到粘性元素区域悬浮效果

CSS3的position:sticky介绍

用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域.position:sticky为此而生. position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:rela

使用 position: sticky 达到粘性元素区域悬浮效果

在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上.还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计. 这种效果一直以来需要通过 JavaScript 实现.不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中.下面是一个示例: .sticky { position: -webkit-sticky; posi

position:sticky用法

用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域.position:sticky为此而生. position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:rela

鼠标滚动,导航置顶.纯css3的position: sticky;

position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ //定位头部置顶效果 top: 0; position: sticky; } .b{ //当纯的给个滚

position sticky 用法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 100%; height: 100%; } ul>li{ height: 400px; width: 100%; l

css3 position:sticky

最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取指定位置错误,因为上面都是图片,在图片未加载出来时获取高度,高度值不对,解决办法就是在imgae上加bindload事件,在图片加载加载完成之后再获取高度: bug2:onPageScroll事件会有延迟,导致最终效果会出现卡顿,百度之后知道有一个position:sticky,是一个很有意思的属性

position:sticky

前言:position:sticky是css定位新增属性:可以说是相对定位relative和固定定位fixed的结合:它主要用在对scroll事件的监听上:简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px):position:sticky这时的效果相当于fixed定位,固定到适当位置.使用:#sticky-nav {position: sticky;top: 100px;}设置position:sticky同时给一个(top,bottom