{"action":"opened","issue":{"url":"https://api.github.com/repos/luofeiioi/Blog/issues/9","repository_url":"https://api.github.com/repos/luofeiioi/Blog","labels_url":"https://api.github.com/repos/luofeiioi/Blog/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/luofeiioi/Blog/issues/9/comments","events_url":"https://api.github.com/repos/luofeiioi/Blog/issues/9/events","html_url":"https://github.com/luofeiioi/Blog/issues/9","id":421893113,"node_id":"MDU6SXNzdWU0MjE4OTMxMTM=","number":9,"title":"CSS 粘性布局","user":{"login":"luofeiioi","id":30742497,"node_id":"MDQ6VXNlcjMwNzQyNDk3","avatar_url":"https://avatars3.githubusercontent.com/u/30742497?v=4","gravatar_id":"","url":"https://api.github.com/users/luofeiioi","html_url":"https://github.com/luofeiioi","followers_url":"https://api.github.com/users/luofeiioi/followers","following_url":"https://api.github.com/users/luofeiioi/following{/other_user}","gists_url":"https://api.github.com/users/luofeiioi/gists{/gist_id}","starred_url":"https://api.github.com/users/luofeiioi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luofeiioi/subscriptions","organizations_url":"https://api.github.com/users/luofeiioi/orgs","repos_url":"https://api.github.com/users/luofeiioi/repos","events_url":"https://api.github.com/users/luofeiioi/events{/privacy}","received_events_url":"https://api.github.com/users/luofeiioi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-03-17T07:47:45Z","updated_at":"2019-03-17T07:47:45Z","closed_at":null,"author_association":"OWNER","body":"# 粘性布局是什么\r\n当你在浏览网页的时候，滚动滚轮，网页也开始上下动起来，这个结构类似于胶片放映机，整个浏览器是窗口，在窗口的背后网页类似于胶片一样移动。粘性布局在你滑动滚轮的时候，滚动到某个位置就好像黏住了一样，就像胶片放映机卡住了一样，最上层的图像是固定的。\r\n# position: sticky\r\n  position: sticky是CSS3的原生实现，首先设置  position: sticky;然后设置top或bottom，意思是到那个阈值在页面上黏住。\r\n```\r\n.mainTwo{\r\n  height: 100px;       //实现在距离顶端20px的时候黏住\r\n  width: 100px;\r\n  background-color: red;\r\n  position: sticky;\r\n  top:20px;\r\n}\r\n```\r\n# 使用该方式的时候浏览器干了什么\r\n通过使用Chrome的Layers可观察到，当到达该阈值的时候，渲染引擎创造了一个空白块级占位块，并为该元素创立新图层。再次到达该阈值时，过程取反。\r\n"}}
{"actor":{"display_login":"luofeiioi"}}