小控件——固定侧边栏

html

   <!-- 返回顶部模块 -->
        <div class="goBack">⬆</div>

js:

 // 封装一个缓动动画，为电梯事件和返回顶部事件调用

    function upDown(obj, target, callback) {
        clearInterval(upDownTimer)
        var upDownTimer = setInterval(function () {
            // 注意offsetLeft还是offsetWidth
            var objOffsetTop = obj.offsetTop
            // 步长必须写到计时器里面，异步执行
            var step = (target - window.pageYOffset) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            // 有正有负，所以必须写等于
            if (window.pageYOffset == target) {
                clearInterval(upDownTimer)
                if (callback) {
                    callback()
                }
            } else {
                // offsetWidth只是可读属性，style.left还要注意带单位
                window.scroll(0, window.pageYOffset + step)
            }
        }, 30)
    }
    // 7.返回顶部模块
    var goBack = document.querySelector('.goBack')
    var character = document.querySelector('.character')
    var characterDistance = character.offsetTop
    var goBackDistance = goBack.offsetTop
    // 固定侧边栏
    document.addEventListener('scroll', function () {
        if (window.pageYOffset >= characterDistance) {
            goBack.style.position = 'fixed'
            goBack.style.top = goBackDistance - characterDistance + 'px'
        }
        else {
            // 因为在移动的过程中,style.top值是会改变的，所以我们要重新给它赋值
            goBack.style.position = ' absolute'
            goBack.style.top = '900px'
        }
    })

    // 点击返回顶部
    goBack.addEventListener('click', function () {
        // window.scroll(0, 0)  //也可以封装一个缓动动画，实现缓慢滚动的效果
        upDown(window, 0)
    })