登录/注册

首页 › 活字格专区 › 专题教程 › 查看内容

284 主题	1万帖子	1万积分

积分: 16788

211731
金币
284
主题
10744
帖子

最新发帖

[易学技巧] 一看就会，超有用活字格技能：三十三，页面中的悬浮button

讲师达人认证

悬赏达人认证

活字格认证

论坛元老 / 发表于：2018-8-30 14:37 / 查看：8724 / 回复：0

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

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

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

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

image.png927792358.png

然后，需要写一小段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啦~
image.png221637877.png

image.png221637877.png

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

评分

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

查看全部评分

收藏

回复

点我了解价格 & 预约官方技术顾问

0 个回复