这是解决方案
JS
var winHeight = $(window).innerHeight();$(document).ready(function () { $(".panel").height(winHeight); $("body").height(winHeight*$(".panel").length);});window.addEventListener('resize', function (event) { $(".panel").height($(window).innerHeight());});$(window).on('scroll',function(){ $(".panelCon").css('bottom',$(window).scrollTop()*-1);});HTML
<body> <div > <div id="pane-5" > <h1>5</h1> </div> <div id="pane-4"> <h1>4</h1> </div> <div id="pane-3"> <h1>3</h1> </div> <div id="pane-2" > <h1>2</h1> </div> <div id="pane-1" > <h1>1</h1> </div> </div></body>
CSS
body { margin: 0; padding: 0;}.panelCon{ position: fixed; bottom: 0; left:0; width: 100%;}.panel { width: 100%;}.panel h1 { width: 100px; position: relative; display: block; margin: 0 auto; text-align: center; top: 50%;}#pane-1 { background-color: green;}#pane-2 { background-color: red;}#pane-3 { background-color: white;}#pane-4 { background-color: pink;}#pane-5 { background-color: yellow;}
