粘性定位position:sticky用法,手机移动设备：flex布局

最新推荐文章于 2022-09-14 21:03:03 发布

韩凌疯

最新推荐文章于 2022-09-14 21:03:03 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/xinshiku/article/details/50014959

版权

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

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

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

原文地址：http://www.qianduan.net/position-sticky-introduction.html

当然也可以用Jquery插件实现：http://www.jq22.com/jquery-info518

flex: http://www.daqianduan.com/6281.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>

<div class="flex flex-pack-justify">
<div>模块一</div>
<div>模块二</div>
<div>模块三</div>
<div>模块四</div>
</div>

</body>
</html>