JS——scroll动画

固定导航栏

1、计算导航栏到顶部的距离值

2、当scrollTop值大于这个距离值就添加定位，当小于距离值后解除定位

注意事项：当导航栏添加定位之后，导航栏就脱离了文档流，也就是不占位了，下面的盒子就会顶上来，所以要给下面盒子添加padding-top值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            height: 5000px;

        }

        .box1 {

            height: 40px;

            background-color: pink;

            overflow: hidden;

        }

        .box2 {

            height: 50px;

            background-color: yellow;

            font: 500 20px/50px "simsun";

            text-align: center;

        }

        .box3 {

            width: 820px;

            height: 512px;

            margin: 10px auto;

        }

        .fixed {

            position: fixed;

            width: 100%;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2">导航栏</div>

<div class="box3">

    <img src="data:images/nba.jpg">

</div>

<script>

    var banner = document.getElementsByTagName("div")[0];

    var nav = document.getElementsByTagName("div")[1];

    var lastDiv = document.getElementsByTagName("div")[2];

    window.onscroll = function () {

        if (scroll().top >= banner.offsetHeight) {

            nav.className = "box2 fixed";

            lastDiv.style.paddingTop = nav.offsetHeight + "px";

        } else {

            nav.className = "box2";

            lastDiv.style.paddingTop = "0px";

        }

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

两侧跟随广告

1、之前都是offsetLeft计算x轴上的移动，现在是计算y轴方向的移动

2、鼠标滚动之后，遮盖的距离scrollTop值，需要和广告之前的定位Top值进行相加才是滚动的真正目标值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            height: 5000px;

        }

        .box1 {

            width: 800px;

            margin: 50px auto;

            font: 500 25px/45px "simsun";

            color: red;

            text-align: center;

        }

        span {

            position: absolute;

            top: 300px;

            width: 40px;

            height: 120px;

            background: rgba(255, 142, 142, 0.3);

            font: 600 30px/60px "simsun";

            color: red;

            text-align: center;

        }

        .ad-left {

            left: 400px;

        }

        .ad-right {

            right: 400px;

        }

    </style>

</head>

<body>

<span class="ad-left">广<br>告</span>

<span class="ad-right">广<br>告</span>

<div class="box1">

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

</div>

<script>

    var sp1 = document.getElementsByTagName("span")[0];

    var sp2 = document.getElementsByTagName("span")[1];

    window.onscroll = function () {

        animate(sp1, scroll().top + 300);

        animate(sp2, scroll().top + 300);

    }

    function animate(ele, target) {

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            var step = (target - ele.offsetTop) / 10;

            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            ele.style.top = ele.offsetTop + step + "px";

            if (Math.abs(target - ele.offsetTop) <= Math.abs(step)) {

                ele.style.top = target + "px";

                clearInterval(ele.timer);

            }

        }, 15);

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

回到顶部

1、技术点：window.scrollTo(x,y)，之前都是移动某个元素，现在是需要移动整个显示区域，所以用window.scrollTo(x,y)

2、浏览器显示区域已经滚动的距离其实就是scrollTop值，做缓动画，只需要将这个值慢慢变小，一直到0即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            height: 5000px;

        }

        .box1 {

            width: 800px;

            margin: 50px auto;

            font: 500 25px/45px "simsun";

            color: red;

            text-align: center;

        }

        span {

            position: fixed;

            bottom: 30px;

            right: 30px;

            width: 40px;

            height: 120px;

            background: rgba(255, 142, 142, 0.3);

            font: 600 30px/30px "simsun";

            color: red;

            text-align: center;

            display: none;

        }

    </style>

</head>

<body>

<span>回<br>到<br>顶<br>部</span>

<div class="box1">

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

    锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆幸苦<br>

</div>

<script>

    var sp = document.getElementsByTagName("span")[0];

    var target = 0;//目标位置

    var leader = 0;//显示区域自身的位置

    window.onscroll = function () {

        if (scroll().top > 400) {

            sp.style.display = "block";

        } else {

            sp.style.display = "none";

        }

        leader = scroll().top;

    }

    var timer = null;

    sp.onclick = function () {

        clearInterval(timer);

        timer = setInterval(function () {

            var step = (target - leader) / 10;

            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            leader = leader + step;

            window.scrollTo(0, leader);

            if (Math.abs(target - leader) <= Math.abs(step)) {

                window.scrollTo(0, 0);

                clearInterval(timer);

            }

        }, 15);

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

楼层跨越

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        body {

            height: 5000px;

        }

        ul {

            width: 800px;

            margin: 0 auto;

        }

        ul li {

            height: 400px;

        }

        ol {

            position: fixed;

            top: 150px;

            left: 350px;

        }

        ol li {

            width: 50px;

            height: 50px;

            font: 500 15px/50px "simsun";

            text-align: center;

            border: 1px solid #ccc;

            margin-top: -1px;

            cursor: pointer;

        }

    </style>

</head>

<body>

<ul>

    <li>上衣</li>

    <li>下衣</li>

    <li>春天</li>

    <li>夏衣</li>

    <li>秋衣</li>

    <li>冬衣</li>

</ul>

<ol>

    <li>上衣</li>

    <li>下衣</li>

    <li>春天</li>

    <li>夏衣</li>

    <li>秋衣</li>

    <li>冬衣</li>

</ol>

<script>

    var ul = document.getElementsByTagName("ul")[0];

    var uLiArr = ul.children;

    var ol = document.getElementsByTagName("ol")[0];

    var oLiArr = ol.children;

    var arrColor = ["pink", "blue", "yellow", "orange", "green", "red"];

    var timer = null;

    var dispalyArea = 0;//显示区域坐标

    var target = 0;//目标值

    for (var i = 0; i < arrColor.length; i++) {

        uLiArr[i].style.backgroundColor = arrColor[i];

        oLiArr[i].style.backgroundColor = arrColor[i];

        oLiArr[i].index = uLiArr[i].offsetTop;

        //显示区域的scrollTop值与目标的scrollTop值差值

        oLiArr[i].onclick = function () {

            target = this.index;

            clearInterval(timer);

            timer = setInterval(function () {

                var step = (target - dispalyArea) / 10;

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                dispalyArea = dispalyArea + step;

                window.scrollTo(0, dispalyArea);

                if (Math.abs(target - dispalyArea) <= Math.abs(step)) {

                    clearInterval(timer);

                    window.scrollTo(0, target);

                }

            }, 15);

        }

    }

    window.onscroll = function () {

        dispalyArea = scroll().top;

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

JS——scroll动画的更多相关文章

js scroll动画
知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置 scroll scroll:卷动意思(书卷) 从上到下移动 1.window.onscroll 窗口滚动事件 ...
用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
js双层动画幻灯
js双层动画幻灯点击下载
js运动动画
原文:js运动动画今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

随机推荐

Truck History（卡车历史）
Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26547 Accepted: 10300 Description Adv ...
W3School Memcached教程（安装/基本操作/高级操作/命令）
来自W3School的Memcached教程,基本上涵盖了从安装到状态监控的教程. 不过最全的应该是官方提供在GitHub上的Wiki教程,一切的标准都来自官方,参考:https://github.c ...
24、Java并发性和多线程-信号量
以下内容转自http://ifeve.com/semaphore/: Semaphore(信号量) 是一个线程同步结构,用于在线程间传递信号,以避免出现信号丢失(译者注:下文会具体介绍),或者像锁一样 ...
wsgi初探
大半夜的不睡觉,起来看技术文档,我这是什么精神啊~ ok 本文的大部分内容都是阅读 http://wsgi.readthedocs.org/en/latest/ 得来的.下面开始研究 wsgi wsg ...
WeixinJSBridge 微信
<!DOCTYPE html> <html> <head><title>微信WeixinJSBridge API</title> <m ...
第K顺序统计量的求解
一个n个元素组成的集合中,第K个顺序统计量(Order Statistic)指的是该集合中第K小的元素,我们要讨论的是如何在线性时间(linear time)里找出一个数组的第K个顺序统计量. 一.问 ...
myeclipse中Servlet出错
在myeclipse中Servlet总是出错,执行的时候一直提示找不到出现404错误, 然后把代码拷贝到eclipse ee中就没有问题,一直不理解怎么回事. 然后发了好长时间试了好些方法,结果把my ...
splay专题复习——bzoj 3224 & 1862 & 1503 题解
[前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...
Meter Bus解析4：升压斩波电路
Meter Bus解析1(http://blog.csdn.net/qingwufeiyang12346/article/details/47767595),对Meter Bus进行 ...
abstract (C# Reference)
https://msdn.microsoft.com/en-us/library/sf985hc5.aspx The abstract modifier indicates that the thin ...

JS——scroll动画

JS——scroll动画的更多相关文章

随机推荐

热门专题