在本效果中，当鼠标滚轮滑动，或者拉动滚动条的时候，指定的购物车将始终保持在屏幕的最上方，上下保持绝对位置，而左右可以保持相对位置，非常好，当滚动条滚回原来的位置后，购物车层又会自动回到初始位置，此代码兼容各种浏览器。
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<style type="text/css">
#header {height:120px; background:#aaa; padding:10px;}
#leftCol {width:580px; height:1500px; float:left; background:#ddd; padding:10px;}
#rightCol {width:250px; float:right; height:1500px; padding:10px;}
#semiFixed {width:170px;}
#header {height:27px; background:url(top.gif); margin:0; padding:0 0 0 10px; color:#fff; font-size:12px;
line-height:25px; font-family:arial, sans-serif;}
#containerBody {background:url(bottom.gif) left bottom; padding:10px; color:#666; font-family:arial, sans-
serif;}
#containerBody p {font-size:11px; line-height:1.5em; padding:0; margin:5px 0;}
#containerBody h2 {font-size:14px; color:#000; padding:3px 0 0 0; margin:0;}
#containerBody img {display:block; float:left; padding:10px 10px 10px 0;}
.clear {clear:left;}
</style>
<script type="text/javascript">
/* ================================================================
This copyright notice must be untouched at all times.
Stay Put!
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
/* <![CDATA[ */
onload = function() {
startPos = $("#semiFixed").position().top;
divHeight = $("#semiFixed").outerHeight();
$("#placeHolder").css("height", divHeight + "px")
$(window).scroll(function (e) {
scrTop = $(window).scrollTop();
if ((startPos-5) < scrTop) {
if ($.browser.msie && $.browser.version <= 6 ) {
topPos = startPos + (scrTop - startPos) +5;
$("#semiFixed") .css("position", "absolute")
.css("top", topPos +"px")
.css('zIndex', '500')
}
else {
$("#semiFixed") .css("position", "fixed")
.css("top", "5px")
.css("zIndex", "500")
}
}
else {
$("#semiFixed") .css("position", "static")
}
});
}
/* ]]> */
</script>
在网页<body>区添加以下代码
<div id="placeHolder"> <div id="semiFixed"> <h1 id="header">Stay Put !</h1> <div id="containerBody"> <h2>Keep it in view!</h3> <p>Important information, and links, can be kept on screen whilst scrolling.</p> <img src="buynow.gif" alt="Buy now!" title="Buy Now!" /><h2>Buy Now!</h2><p>while it's HOT</p> <h2>ONLY $20,000!</h2> <p>sharejs.com</p> </div> </div> </div> <br class="clear" />
