Day6-网站阅读进度条(上)_到底哪里少算了

今天试着写了在单页式网页侧边比较容易看到的「阅读进度条」
先看成品

总共会写两种方法

第一种
首先先布局
如动图所见，会需要有超过画面高度的内文，这边都用同样大小的内文
然後需要在右侧的阅读进度条，让大家知道现在到哪了

<body>
    <div class="progress_">
        <div class="progress_name">
            <a id="btn_A">A</a>
            <a id="btn_B">B</a>
            <a id="btn_C">C</a>
            <a id="btn_D">D</a>
            <a id="btn_E">E</a>
            <a id="btn_F">F</a>
        </div>
        <div class="progress_bar">
            <div class="bar_line">
                <div class="bar_circle"></div>
            </div>
        </div>
    </div>
    <div class="text_content" id="A">这里是A</div>
    <div class="text_content" id="B">这里是B</div>
    <div class="text_content" id="C">这里是C</div>
    <div class="text_content" id="D">这里是D</div>
    <div class="text_content" id="E">这里是E</div>
    <div class="text_content" id="F">这里是F</div>
</body>

CSS的部分就讲比较重要的就好

.progress_{
    z-index: 100;
    position: fixed;
}

整个阅读进度条需要一直浮在页面上，所以须将它设定成position: fixed;
且为了确保不会被遮挡，把图层拉到最高

其他美观的部分就看大家喜欢就可以~

然後直接进入JS
首先我们要让点击章节时可以滑动到该页面，所以需要用点击跟滑动

$('#btn_A').click(function () { $('html,body').animate({ scrollTop: $('#A').offset().top }, 800); });

这段语法的意思是，当#btn_A被点击时，整个页面会滑动到#A的位置
$('#A').offset().top可以侦测#A区块的最高点，让$('html,body')滑过去~
其他五个按钮以此类推，就能做出点击并滑动的效果了

有些单页式网站的进度条不会有会滚动的那条，所以其实也能直接对点击的区块做css装饰就好~
如下面网址这个网站就是只有点击的部分
https://artemjuliawedding.com/en

那如果喜欢有旁边可以滚动的那条的话，我们就继续吧~
接下来要让那个圆球会在滑动时跟着移动，做法有点类似前几篇做卷轴那样
但是之前做卷轴时，我们的拉杆是根据页面大小去让JS帮我们计算大小
这次我们是指定了圆形的样子所以我们得多加一点东西
这次的scale长这样

var scale_ = ($("body").height()-$(window).height()) / ($('.bar_line').height()-12) //页面长度与进度条比例

差别差在哪里呢?

我们之前算的scrolltop给拉杆後，其实下面还有一个区块是没有卷到的
因为我们的拉杆长度把没卷到的部分补满了，所以不会觉得有空缺
但如果我们这次还是直接用整个页面去算的话，就会少一块，像图片这样

所以这次我们要拿来计算的第一个数值需要是滑到底时的最上面高度，算法满容易懂的，就是拿整体高度扣掉一个可视高度，就可以了
我们的进度条长度比例
因为要让圆圈跟文字高度差不多，所以在算圆圈要跑的长度时，需要扣掉一个圆圈的长度
就想成上面扣半个圆下面扣半个圆就好，这个部分只是为了美观w

完成这个部分的改变後，其他就跟做卷轴是一样的，全部加上去後就完成了

var scroll_ = 0;  //滚动多少
var scroll_float = 0;
$(window).scroll(function () {
    var scale_ = ($("body").height()-$(window).height()) / ($('.bar_line').height()-12) //页面长度与进度条比例
    scroll_ = $(this).scrollTop()
    scroll_float = (scroll_ / scale_)
    $('.bar_circle').attr("style", "margin-top:" + scroll_float + "px");
})

到这里就完成方法一的网站进度条啦!!

<<: Day 0xB - 建立订单 & Debug 之 De 好 De 不完

>>: Day6 Array and Slice

Day6-网站阅读进度条(上)_到底哪里少算了

CSS基础介绍(3)

ESP32_DAY5 来新建一个专案吧!

Day17 Mixin 後，搭配 RWD

威胁建模（threat modeling）的步骤

Day 7 - 浅谈Laravel资料库关联的运用

D10. 学习基础C、C++语言

防止常见的Web攻击开发方法

[Java Day05] 1.3. 基本资料的转型

(Day15) 闭包进阶使用，工厂模式及私有方法。

如何避免 MS-SQL 暴力登入攻击