Tracy.Liu 发表于 2018-8-30 14:37:58

一看就会,超有用活字格技能:三十三,页面中的悬浮button

本帖最后由 Timothy.Xu 于 2021-3-8 12:06 编辑

很多网站都会有一个或多个悬浮的按钮,不管你怎么滚动鼠标滚轮,它就一直固定在屏幕的某个位置。本帖就来介绍一下,这种按钮该如何设置。

其实这个功能和之前有个侧边小广告的功能比较相似~下面先看下效果~
   

要想实现这个功能,第一步当然是在页面中放置按钮啦。
   

然后,需要写一小段CSS。如果您是7.0之前的版本,请使用这段代码:
.fixedBb {
    position: fixed !important;
    top: auto !important;
    bottom: 10px;
    }如果是7.0或之后的版本,由于底层布局切换为了 grid 布局,需要使用这段代码:
.fixedBb {
    position: fixed !important;
    top: auto !important;
    bottom: 10px;
    /* 这里需要自己指定宽度的像素 */
    width:60px !important;
    /* 这里需要自己指定高度的像素 */
    height:60px !important;
    } 最后,给按钮添加类名fixedBb ,就OK啦~   
   

是不是的确一看就会呀~~:jy74a:







页: [1]
查看完整版本: 一看就会,超有用活字格技能:三十三,页面中的悬浮button