没有什么问题是用一个div解决不了的,如果有,那就用两个。
很多网站右侧都有一个或多个悬浮的按钮,不管页面滑动到哪,它就在你眼皮底下,今天就来实现这个悬浮的button。
Requirement:
实现跟随页面滚动的悬浮按钮。
Implementation:
- 首先我们要创建一个父div,把要放置的按钮都写在这个div中。
html:
<body>
<div class="main-container">
<div class="main-content"> //网页的主要内容
</div>
<div class="float-button"> //悬浮按钮
</div>
</div>
</body> -
通过css给这个父div设置属性,使其固定在屏幕上。
CSS:
.float-button {
position: fixed; //关键
height: 90px;
width: 40px;
bottom: 90px;
right: 50px;
background: #b4d145;
}
大功告成:
右侧有了一个悬浮的div(浏览器的滚动条为证),将想要悬浮的内容写在这个div里面就可以了,是不是很简单。。◕‿◕。