找回密码
 立即注册

QQ登录

只需一步,快速开始

Tracy.Liu 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2018-8-30 14:37  /   查看:8900  /  回复:0
本帖最后由 Timothy.Xu 于 2021-3-8 12:06 编辑

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

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

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

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

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







评分

参与人数 7满意度 +35 收起 理由
追风 + 5
dlxubo + 5
玉轩 + 5
卡卡 + 5 赞一个!
hepingshizhe55 + 5 很给力!
carl_chen + 5 很给力!
darwindeng + 5 很给力!

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部