js特效01动画效果及页面固定导航栏

day01体验动画效果

<script>
    var timer=null;
    var btn=document.getElementById('btn');
    var btn1=document.getElementById('btn1');
    var box=document.getElementById('box');
    btn.onclick=function() {
        animate (box,200);
        }
    btn1.onclick=function() {
        animate (box,400);
        }
//封装动画函数
//需求：能够让任对象移动到指定的位置
function animate (obj,target) {//传入任意对象obj，指定位置target。
    clearInterval(obj.timer);//每次执行前先清除定时器，防止重复设置定时器。
        obj.timer=setInterval(function () {//加上定时器
            var leader=obj.offsetLeft;//获取当前对象的位置
            var step=10;//设置步长
            /*if (leader<target) {
                step=step;
            }else{
                step=-step;
            };*/
            step=leader<target?step:-step;
            if (Math.abs(leader-target)>=Math.abs(step)) {//距离大于步长值，
                leader=leader+step;//动画公式
                obj.style.left=leader+"px";//leader只是数字，需要加单位
                }
                else{
                    obj.style.left=target+"px";//手动放到终点
                    clearInterval(obj.timer);
                }
        },15)
    }
</script>

小结：设置定时器后清理定时器：清理定时器时需要有定时器的id，timer
var timer=null;
timer=setInterval(function () {}，15);
clearInterval(timer);

2.1 scroll系列 页面滚动坐标

window.onscroll=function () {
    //scroll ().top//被卷去的头部。调用这个函数就相当于调用了这个对象
    //scroll ().left//被卷去的头部
console.log(scroll().top);
};
//封装scroll函数
//封装获取页面被卷去的头部高度和左侧宽度的 兼容函数
function scroll() {
    var scrollTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var scrollLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;
        var o={};
        o.top=scrollTop;
        o.left=scrollLeft;
        return o;//返回一个对象，函数的返回值是什么，就相当于调用了什么。
}

页面滚动坐标scroll代码简化：

代码简化：对象点出来的属性 没有字面量简洁。
function scroll() {
        return{
            top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0
    } ;//返回一个对象，函数的返回值是什么，就相当于调用了什么。
}

2.3 页面固定导航栏
需求：窗体滚动的时候 判断页面被卷去的头部的高度 如果大于topPart的高度 就要把nacBar变成固定定位

<script>
    //获取元素
    var topPart=document.getElementById('topPart');
    var nacBar=document.getElementById('nacBar');
    var mainPart=document.getElementById('mainPart');
    //页面滚动
    window.onscroll=function(){
        if(scroll().top>topPart.offsetHeight) {
            navBar.className="fixed";//改变定位，
            //固定定位脱离标准流，不占位置，后边的就跳上来了
            //为了防止 后面的内容跳上来 可以给后面的内容加上paddingTop值。
            mainPart.style.paddingTop=navBar.offsetHeight+"px";
        }else{
            navBar.className="";
            mainPart.style.paddingTop=0;

        };
    }