基于滚动百分比的jQuery Animate translationY

My codepen: http://codepen.io/mdmoore/pen/MwjoLZ$(function(){ $('section').each(function() { var off = $(this).offset().top $(this).data('orig-offset', off); }); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('section').each(function(){ var off = $(this).data('orig-offset'); var translate = (scrollTop - off) / $(window).height() * 100; if (scrollTop >= off) { $(this).css({transform: 'translateY(' + translate +'%)'}); } }); });});推荐答案这是一种方法.随意优化它.Here's one way. Feel free to optimize it if you want. $(function(){ $('section').each(function() { var off = $(this).offset().top $(this).data('orig-offset', off); }); $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); $('section').each(function(){ var off = $(this).data('orig-offset'); if (scrollTop >= off) { var translate = (scrollTop - off) / $(window).height() * 100; console.log(translate); $(this).css({transform: 'translateY(' + translate +'%)'}); } }); });});html, body { height: 100%; margin: 0;}h2 { margin: 0; text-align: center;}section { background: #000; height: 100%; width: 100%; position: relative; top: 0;}section:first-of-type { background-color: coral;}section:nth-of-type(2) { background-color: lightgreen;}section:nth-of-type(3) { background-color: lightblue;}section:nth-of-type(4) { background-color: #ffff6e;}section:nth-of-type(5) { background-color: #3c3c3c; color: white;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section class="top"><h2>Some Text</h2></section><section><h2>Some Text</h2></section><section><h2>Some Text</h2></section><section><h2>Some Text</h2></section><section><h2>Some Text</h2></section> 这篇关于基于滚动百分比的jQuery Animate translationY的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！