div套路之悬浮的button


转载:https://www.jianshu.com/p/a03f6136ad8c
 

很多网站右侧都有一个或多个悬浮的按钮,不管页面滑动到哪,它就在你眼皮底下,今天就来实现这个悬浮的button。

Requirement:
实现跟随页面滚动的悬浮按钮。

Implementation:

  1. 首先我们要创建一个父div,把要放置的按钮都写在这个div中。
    html:
    <body>
    <div class="main-container">
    <div class="main-content"> //网页的主要内容
    </div>
    <div class="float-button"> //悬浮按钮
    </div>
    </div>
    </body>
  2. 通过css给这个父div设置属性,使其固定在屏幕上。
    CSS:
    .float-button {
    position: fixed; //关键
    height: 90px;
    width: 40px;
    bottom: 90px;
    right: 50px;
    background: #b4d145;
    }
    大功告成:

  3.  

     

    右侧有了一个悬浮的div(浏览器的滚动条为证),将想要悬浮的内容写在这个div里面就可以了,是不是很简单。。◕‿◕。


 

猜你喜欢

转载自blog.csdn.net/qq_34266804/article/details/88316086