如何使用jQuery修复视差平滑滚动？

Question

我想创建视差效果，但是滚动时遇到问题； 它在跳。 我想平滑滚动。 请帮忙。

 let READY = { onReady: function() { $(window).scroll(READY.doScrollAction); }, doScrollAction: function() { let wScroll = $(this).scrollTop(); let scrollingBackground = (50 + (wScroll / 10)); if (scrollingBackground < 101) { $('header').css({ 'background': 'linear-gradient(to right, #0DA7E9 ' + scrollingBackground + '%, #f1f6f6 50%)' }); $('header').css({ 'position': 'fixed', 'min-height': '100vh', 'width': '100%', 'z-index': '9999' }); } else { $('header').css({ 'position': 'static', 'z-index': '0' }) } } }; $(document).ready(READY.onReady); 

 html, body { padding: 0; margin: 0; } header { min-height: 100vh; background: linear-gradient(to right, #0DA7E9 50%, #f1f6f6 50%); } .aboutme { min-height: 100vh; background-color: red; padding-top: 500px; padding-bottom: 500px; } h1 { text-align: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="header"> </header> <section class="aboutme d-flex align-items-center"> <h1> CONTENT </h1> </section> 

jsFiddle

Answer 1

只需像这样编辑CSS： http : //jsfiddle.net/21kof8tp/

 let READY = { onReady: function () { //Scroll $(window).scroll(READY.doScrollAction); }, doScrollAction: function () { let wScroll = $(this).scrollTop(); let scrollingBackground = (50 + (wScroll / 100)); if (scrollingBackground < 101) { $('header').css({ 'background': 'linear-gradient(to right, #0DA7E9 ' + scrollingBackground + '%, #f1f6f6 50%)' }); $('header').css({ 'position': 'fixed', 'min-height': '100vh', 'width': '100%', 'z-index': '9999' }); } else { $('header').css({ 'position': 'static', 'z-index': '0' }) } } }; $(document).ready(READY.onReady); 

 html, body { padding:0; margin:0; } header{ min-height:1000vh; background: linear-gradient(to right, #0DA7E9 50%, #f1f6f6 50%); } .aboutme{ min-height:1000vh; background-color: red; padding-top:500px; padding-bottom:500px; } h1{ text-align:center; } html { scroll-behavior: smooth; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header class="header"> </header> <section class="aboutme d-flex align-items-center"> <h1> CONTENT </h1> </section> 

只需编辑滚动的大小即可。