js侧边广告案例

侧边广告是网页中最常见的功能,如下,在滚动网页中,广告会缓动回固定的位置.

目标知识点:

• 练习offset家族
• 练习scroll方法
• 复习interval缓动动画和定时器

代码:

window.onload = function () {
    //获取广告头部的高度
    var offset_top = $("aside").offsetTop;
    //监听窗口的滚动
    //起始值 结束值 定时器
    var begin = 0, end = 0, timer = 0;
    window.onscroll = function () {
        //清除定时器
        clearInterval(timer);
        //获取滚动的高度
        var scroll_top = scroll().top;
        end = offset_top + scroll_top;
        //缓动动画
        timer = setInterval(function () {
            //缓动公式
            begin = begin + (end - begin) * 0.2;
            //广告的盒子
            $("aside").style.top = begin + "px";
            //清除定时器
            if (Math.round(begin) === end) {
                clearInterval(timer);
            }
        }, 20)
    }
};