<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{ float:left; width:880px; height:1800px ; background:#FF0000; margin-right: 10px; margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; }</style></head><body><div id="wrap"> <div class="left" id="left"> <script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: pos, top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#left").smartFloat(); </script> </div> <div id="center"> <p>center</p> </div> <div class="right" id="right"> <script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: pos, top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#right").smartFloat(); </script> </div></div></body></html>
我猜你要的是这种效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{ float:left; width:880px; height:1800px ; background:#FF0000; margin-right: 10px; margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; }</style></head><body><div id="wrap"> <div class="left" id="left" > </div> <div id="center"> <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p> </div> <div class="right" id="right"><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){ if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style')) { var right={'top':$('#right').offset().top,'left':$('#right').offset().left}; var left={'top':$('#left').offset().top,'left':$('#left').offset().left}; var center={'left':$('#center').position().left} $('#center').css({'position':'absolute','left':center.left}); $('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left}); $('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left}); } if($(this).scrollTop()<min_scroll&&$('#left').attr('style')) { $('#left').removeAttr('style'); $('#right').removeAttr('style'); $('#center').removeAttr('style'); } });</script> </div></div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.top{ width:1200px; height:150px; background:#000; margin-bottom: 10px; } .left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{ float:left; width:880px; height:1800px ; background:#FF0000; margin-right: 10px; margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; } .bot{ float:left; width:1200px; height:150px; margin-top: 10px; background-color: #00F; } </style></head><body><div id="wrap"> <div class="top"> </div> <div class="left" id="left" > </div> <div id="center"> <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p><p>center8</p><p>center9</p><p>center10</p> </div> <div class="right" id="right"> </div> <div class="bot" id="bot"> </div> </div><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){ if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style')) { var right={'top':0,'left':$('#right').offset().left}; var left={'top':0,'left':$('#left').offset().left}; var center={'left':$('#center').position().left} var bot={'top':0,'left':$('#bot').offset().left} $('#bot').css({'position':'fixed','left':bot.left,'top':bot.top,'margin':0}); $('#center').css({'position':'absolute','left':center.left}); $('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left}); $('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left}); } if($(this).scrollTop()<min_scroll&&$('#left').attr('style')) { $('#left').removeAttr('style'); $('#bot').removeAttr('style'); $('#right').removeAttr('style'); $('#center').removeAttr('style'); } });</script> </body></html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
