分栏置顶悬浮功能

分栏置顶悬浮

功能作用

  • 实现页头区域其中一个分栏模块可以置顶悬浮,用户访问网站滚动鼠标时候会一直悬浮跟随,常用于LOGO及导航悬浮跟随。

实现效果

  • 访客访问网站往下滚动,悬浮的内容会跟随。


一、分栏置顶悬浮设置

1.1 进入网站编辑页面-左侧添加模块—添加响应分栏或自定义分栏—拖动到页头区合适位置

2.2 完善分栏里面的内容,如第一个GIF动图为例,可以选择3.9分栏,分别把左侧的LOGO图文模块,及右侧的导航模块分别添加拖到对应分栏。

2.3 设置分栏的悬浮——鼠标移到右侧分栏——点击向上箭头图标设置

  • 跳出设置菜单:

  • 默认没有效果

二、各效果设置

2.1、置顶效果:

  • 默认初始状态下占位,但页面往下滚动时,分栏将会固定置顶;

2.2、悬浮效果:

  • 仅按设置的距离悬浮,无固定效果;(注意:悬浮距离需要预览或访问才有效果)

2.3、悬浮且置顶效果:

  • 初始状态下按设置的距离悬浮且不占位,但是往下滚动时变为固定置顶;


常见问题:

问:为什么悬浮后导航是白色背景,需要透明怎么设置?

答:需要设置导航模块的样式设置-菜单栏的背景设置为透明即可。其它模块原理相同。

问:怎么实际类似黑色磨砂透明的颜色?

签:设置颜色时候选择颜色后,可以再调整颜色的透明度,把透明度调到合适即可。