Sticky布局:
所谓Sticky即css实现粘性布局，效果是一个页面上下两部分，当上半部分高度小的时候，下半部分处于页面底部固定位置；当上半部分内容多超过屏幕高度时，拖动上半部分可以看到下半部分依然处于底部固定位置
应用场景
比如这个场景，不管内容多少，你始终需要让“关闭的按钮”在底部固定的位置
饿了么商家公告信息
实现步骤
- 将页面高度设为100%固定( 习惯把box-sizing设置为 border-box)
- 上半部分的高度设置为最小高度100%，至少与页面同高
- 将上半部分底部需要空出下半部分的高度，将padding-bottom设置为下半部分的高度
- 下半部分设置固定宽高后，设置为绝对定位(为了不占用页面高度)，目前效果是它本来就处于页面最底部，超出屏幕；这个时候为了把它提上来到上一步的“padding-bottom”位置，
最关键一步是==> 不要设置“top或者bottom”值，而是设置“margin-top= 自身高度”
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
#main {
background-color: red;
}
#wrap {
background-color: yellowgreen;
min-height: 100%;
padding-bottom: 150px;
}
#main {
}
#footer {
background-color: yellow;
position: absolute;
margin-top: -150px;
left: 0;
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
近日，微博认证“科普医生博雅”称，刚刚看到一个医生写的帖子：她在云南白药中草药牙膏成分中发现了氨甲环酸，并指出，这是血液科医生常用的止血药，并且还是处方药。该话题立即引发网友议论和猜疑，“难道云南白药牙膏是中药负责宣传，西药负责效果？”“云南白药中草药牙膏的止血功能是因为加入了西药成分？”据了解，目前由于云南白药是国家保密配方，虽然其中成分表中简单写明了云南白药，但公众并不知道它的具体成分。
公开信息显示，氨甲环酸又被称作凝血酸，常在临床中使用，如出血过多、外科手术、美白以及血友病患者治疗。这种药物通过与抗纤维蛋白溶酶作用加强抗纤溶作用以达到辅助止血作用，另外，它也可以通过阻止抑纤维蛋白的分解起到止血作用，纤维蛋白是人体内常见的凝血因子。据介绍，这种主要作用是止血的处方药有明确的不良反应，包括有血栓形成和出血、腹泻、呕吐；注射后可有视力模糊、头痛、头晕、疲乏等中枢神经系统症状，虽然很少见但确实存在。而处方药的定义是，必须凭执业医师或执业助理医师处方才可调配、购买和使用的药品。
功效牙膏占据超市货架主要位置
在昨天的网民大讨论中，有医生建议普通消费者日常使用含氟牙膏防蛀牙就可以了。但是北京青年报记者走访超市发现，含氟牙膏难觅踪影，货架上最明显位置码放的都是各种功效牙膏，令人眼花缭乱。护龈的、护牙周的、美白的、抗敏感的、抗口气的、修护牙釉质的、清火的……简直是护牙功效大比拼，琳琅满目，且价格不菲。其中，舒适达抗敏牙膏120克的零售价格35元一支、云南白药留兰香牙膏120克的零售价格24.5元一支、高露洁修护牙釉质牙膏180克的27.9元一支。还有一种西瓜霜精典牙膏200克的最贵，49元一支。北青报记者注意到，在该款牙膏配料表中显示，牙膏中含有西瓜霜、三七、黄连等中药成分，可以减轻牙龈红肿、出血；护理牙釉质；减轻牙面菌斑形成，减轻牙渍，洁白牙齿。而北青报记者仔细寻找后才发现，最为普通的含氟防蛀牙膏被摆在货架最低层，每支10元左右。
请问有含氟牙膏吗？”顾客何先生停留在货架前面左看右看，研究了半天之后向售货员发问，可是售货员却说：“我也不知道啊。”据何先生说，他们一家三口每人使用的牙膏品种都不一样，“我媳妇牙齿敏感，她平时用抗敏牙膏，我闺女爱用美白牙膏，我就使用最普通的那种。”对于功效牙膏，何先生的评价是除了贵一些，也就那么回事儿。他说，闺女用美白牙膏也没见她牙齿变白，媳妇用抗敏牙膏，“时间长了牙齿敏感似乎好一点了，但是好像容易出牙结石，还得去洗牙，又是花钱。”
口腔医学专家指出，牙龈出血是牙周病，应该去看牙医，而不是用带止血药效果的牙膏。血是止住了，但患者的牙周病还在继续，停用了带止血的牙膏，患者还是会继续出血，长期用可能还会耽误口腔疾病的治疗。《心外传奇》作者李清晨说，并不是说云南白药加了氨甲环酸它就有效就能用了，手术过程中氨甲环酸不能轻易用。要是患者牙龈出血都到了需要用氨甲环酸的地步，那就早该去看牙医了
</div>
</div>
<div id="footer"></div>
</body>
</html>
延伸:从技术上来看，其实就是在整个页面内容小于一个屏幕高度的时候，需要底部的部分的position表现为absolute；在整个页面内容大于一个屏幕高度的时候，底部的部分的position表现为relative；其实目前已经有一个实验中的新css特性
position:sticky，只是暂时还未投入使用，兼容性不好
距离页面顶部大于一定值，表现为 position:relative;
p1.gif
距离页面顶部小于一定值，表现为 position:fixed;
p2.gif
网友评论