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>

转载于:https://www.cnblogs.com/wuqiuxue/p/7941890.html

JS——scroll动画相关推荐

js scroll动画
知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置 scroll scroll:卷动意思(书卷) 从上到下移动 1.window.onscroll 窗口滚动事件(必须有 ...
react中react-custom-scrollbars返回顶部功能，如何使其有平滑动画效果；原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
html5js图片滚动,基于滚动的超酷js图片动画特效
这是一款基于滚动的超酷js图片动画特效.该特效在使用鼠标滚动屏幕时,根据屏幕的当前位置,屏幕上的图片做出相应的动画效果,非常炫酷. 使用方法 HTML结构 CSS样式 // The container ...
js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval( ...
D3.js用动画渲染数据集的显示
介绍数据统计和数据分析离不开数据集.之前几篇博客(用D3.js进行医疗数据可视化 (一)折线图 (Line Chart) 等)基于的是国家卫生和计划生育委员会统计信息中心的数据,可以说是已经经过了加 ...
原生js实现动画过渡效果
原生JS实现动画过渡效果原理一般情况实现动画效果可以采用CSS3里的transition属性实现动画过渡.但如果有需求只能采用原生JS的情况下可以采用JS里的定时器功能.当然还有很多可以实现动画效果 ...
分享112个JS特效动画效果，总有一款适合您
分享112个JS特效动画效果,总有一款适合您 112个JS特效动画效果下载链接:https://pan.baidu.com/s/1uC61pccye_oYqBnUugIuig?pwd=u21z 提取 ...
js树枝增长动画js特效
下载地址 js树枝增长动画特效 dd:
分享113个JS特效动画效果，总有一款适合您
分享113个JS特效动画效果,总有一款适合您 113个JS特效动画效果下载链接:https://pan.baidu.com/s/1k0fyflcyTKQM9pYEif2f9g?pwd=hpa8 提取 ...

JS——scroll动画

JS——scroll动画相关推荐

最新文章

热门文章