经常会遇到的以下情形:
导航向下滚就隐藏,向上滚动就显示
实现滚动动画效果:向下滚动 左右两边的内容向中间移动,而向上滚动 两个内容又退回到左右两边;又或者向下滚动canvas放大,反之缩小
这些动画原理当知少不了scrollTop()函数;
scrollTop() 定义和用法
scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。
Note:
当滚动条位置位于最顶部时,位置是0;
当用于返回位置时:
该方法返回 第一个匹配元素的滚动条的垂直位置。语法:$(selector).scrollTop()
当用于设置位置时:
该方法设置 所有匹配元素的滚动条的垂直位置。语法:$(selector).scrollTop(position) 参数position : 规定以像素为单位的垂直滚动条位置。
如何判断是up还是down
var a; function scroll( fn ) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll", function() { var afterScrollTop = document.body.scrollTop, delta = afterScrollTop - beforeScrollTop; if( delta === 0 ) return false; fn( delta > 0 ? "down" : "up" ); beforeScrollTop = afterScrollTop; }, false); } //第一种写法 scroll(function(direction) { // console.log(direction); a = direction; }); //第二种写法执行完事件后的回调函数 function fn(direction) { // console.log(direction); a = direction; }; window.onscroll=function(){ console.log(a); }
来解决以上情形
通过判断向上或者向下,后,就是原理问题;
案例~~~~滚动内容往中间或两边移动效果
原理:先给元素设置一个left值让其隐藏,当滚动条到一定位置,改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理
<!DOCTYPE html> <html> <head> <title>Hello World</title> <style type="text/css"> #wrapper {height: 100%;overflow: hidden;} #screen {width: 300px;height: 800px;} #mark{position: relative;width: 200px;height: 50px;font-size: 60px;left: -100px;} #cover{position: relative;width: 200px;height: 50px;font-size: 60px;left: 1360px;} #dialog {position: relative;width: 200px;height: 50px;margin: 0 auto;font-size: 60px;line-height: 50px;opacity: 0;} #ohyeah {height: 800px;} </style> <script src="Lazyload.js/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="screen"></div> <div id="mark">Hello World</div> <div id="dialog"></div> <div id="cover">Hello World</div> <div id="ohyeah"></div> </div> <script type="text/javascript"> var beforeScrollTop = $(window).scrollTop(); $(window).scroll(function() { var afterScrollTop = $(window).scrollTop(), updown = afterScrollTop - beforeScrollTop; if( updown === 0 ) return false; beforeScrollTop = afterScrollTop; console.log(updown > 0 ? "down" : "up"); var isUpDown = updown > 0 ? "down" : "up"; //判断往上还是往下 var scrollTop = $(window).scrollTop(); if(isUpDown == 'down' && scrollTop >= 400) { //数据自取,可依据元素的scrollTop值 var markLeft = parseInt($('#mark').css('left')); left = markLeft + (scrollTop/20); //值的变动与滚动幅度现相关 , 自行调节 console.log(markLeft); if(markLeft <= 640) { //这个值是让他滚动到一个边界 , 自行调节 $('#mark').css('left', left + 'px'); //举例一个元素,其他的自己来咯 } } else if(isUpDown == 'up' && scrollTop <= 700) { //往上时做相反 var markLeft = parseInt($('#mark').css('left')); left = markLeft - (scrollTop/30); if(markLeft >= -100) { $('#mark').css('left', left + 'px'); } } //其他的如opacity left 同理,自己实践一下吧 }); </script> </body> </html>