position：sticky 定位 position:fixed

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

 

.sticky {

  position: -webkit-sticky;

  position:sticky;

  top: 15px;

}

 

不支持的fall back：

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

.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);

http://www.qianduan.net/position-sticky-introduction.html

 

 

position:fixed

Android 2.2+ 需要添加下面的meta才正常：

<meta name="viewport" content="width=device-width, user-scalable=no">

在旧的IOS  Safari 上也有问题

1、页面滚动的时候fixed元素颤抖

2、旋转屏幕的时候飘走了

3、fixed元素里有focusable的元素（例如input），会让这个fixed元素移位

https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

转载于:https://www.cnblogs.com/chuangweili/p/5166212.html