position: sticky

sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。常见的吸顶、吸底(移动端网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。

也许你会遇到的坑

1、sticky 不会触发 BFC。
2、z-index 无效。
3、sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效

实例

html页面




    
    
    
    Document


    

this is boxOne

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores, corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.

this is boxTwo

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores, corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.

this is boxThree

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores, corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.

this is boxFour

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores, corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.

this is boxFive

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quasi quidem asperiores, corporis sint ex sequi, totam quas libero praesentium dignissimos quos, omnis nihil iure temporibus voluptate officiis beatae sapiente cupiditate aut alias laborum porro doloremque. Neque necessitatibus error reprehenderit quidem atque aliquid sint, earum aperiam soluta. Nihil perspiciatis fugiat, quasi quidem illum totam tempora eveniet aspernatur eos, repudiandae vel laborum. Aperiam assumenda explicabo voluptatem dolor at quibusdam, voluptates dolorum fugit recusandae adipisci rem autem maiores, nesciunt consequatur. Veritatis aliquam recusandae modi autem, numquam, earum tenetur voluptates quos officia magni unde dolore, nam repudiandae odit accusantium quam sed impedit est.

css样式:

p{
  position: sticky;
  top: 0;
  background: red;
}

效果:

GIF.gif

你可能感兴趣的:(position: sticky)