<!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>一栏固定一栏跟随</title> </head> <style> body{padding:0; margin:0;} html body{_background-image:url(about:blank);_background-attachment:fixed} .main{width:1000px;margin:0 auto;} .left{width:700px; height:1000px; background: yellow; float:left; padding-top:200px;} .right{ width:300px; float:right;background: #ccc; position: relative;} .other{ height: 200px;} .move{ width:300px; background:red; height:300px;} </style> <script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script> <script> $(document).ready(function() { $(window).scroll(function() { var a=$(document).scrollTop(); if(a>200) { $('.move').css({'position':'fixed','top':'0'}); }else{ $('.move').removeAttr('style'); } }) }) </script> <body> <div class="main"> <div class="left">这里开始<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br /></div> <div class="right"> <div class="other">sdfsd</div> <div class="move">移动层</div> </div> </div> </body> </html>
_针对IE6帮助相对于窗口固定位置的元素实现无抖动效果
background-attachment:fixed 随着页面的滚动轴背景图片不会移动