浮动功能栏

关于命名

我也不知道这个具体的名字叫什么，就按照它的功能起了这么个简单的名字，防止说不清楚，大概解释一下是什么东西。就是在很多网页，我们往下滑时，会在页面的固定位置出现一个(一栏、一片等！)按钮，里面有帮助回到网页顶部的，还有联系网站客服等等的操作。

像这样
掘金

分析

问题

  • 首先就是根据喜好做一排这样的区域(自行发挥)
  • 其次就是确定它要出现的位置( 重点 )即可。
  • 还有几个小细节，就是当回到页面顶部时，这一部分区域会隐藏，当再次滑动到页面非顶部的位置是，又会再一次出现。

解决

  • 固定位置：通过position的fixed固定
  • 通过opacity控制显示显示/隐藏
  • 判断何时显示/隐藏:通过获取滚动条滚动的height判断

用到的知识

css

position

js

scrollTop

  • 获取滚动条滚动过的height

scrollTo

  • scrollTo() 方法可把内容滚动到指定的坐标。

onwheel

  • 鼠标滑轮滚动事件
  • onmousewheel注意，有些文章是写的这个事件，该事件已经废弃(但是有的环境还是可以用)，换成了onwheel

代码

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
...
/* 页面主要内容 */
.con {
    width: 100vw;
    /* 让页面出现滚动条 */
    height: 1100vh;
    background-color: lightcoral;
}
/* 浮动功能栏样式  */
.float {
    padding: 0;
    margin: 0;
    position: fixed;
    top: 70vh;
    right: 5vw;
    /* 默认不显示 */
    opacity: 0;
    z-index: 0;
    transition: all 0.5s;
}
/* 其他样式 */
li {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    list-style: none;
    background-color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

HTML

1
2
3
4
5
6
<div class="con" id="con">

</div>
<ul class="float" id="float">
    <li id="backtop">BACK</li>
</ul>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let con = document.querySelector('#con');
let float = document.querySelector('#float');
let backtop = document.querySelector('#backtop');
// des:设置浮动功能栏的显示/隐藏
let set = function (op, zi) {
    float.style.opacity = op;
    float.style.zIndex = zi;
}
// 点击back返回顶部
backtop.addEventListener('click', function () {
    // 1.document.documentElement.scrollTop = 0;
    // 2.scrollTo返回
    scrollTo(0, 0);
    // 返回后隐藏
    set(0, 0);
});
// 这里更好的效果是换成window的滚动条事件,这样无论是鼠标滑轮还是，键盘翻页键，还是点击滚动条都可以触发
// window.addEventListener("scroll",***)
con.addEventListener('wheel', function () {
    // 获取可视区域宽高
    let viewHeight = document.documentElement.clientHeight;
    // 获取已经滚动条滚动了的高度
    let scrowHeight = document.documentElement.scrollTop;
    // 获取文档高
    let documentHeight = document.body.clientHeight;
    if (scrowHeight === 0) {
        // 隐藏按钮
        set(0, 0);
    } else {
        // 显示按钮
        set(10, 99);
    }
});