演示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左动右固定之Jquery分屏效果</title>
<script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
<div >
<div id="left" style="float: left;margin-right: 20px;width: 620px;">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
<img src="./1.png">
</div>
<div id="right" style="float: left;width: 360px;">
<img src="./1.png">
</div>
</div>
<script>
//右侧列表悬浮
function HomeScrollR(a, d) {
if ($(a).length > 0 && $(d).length > 0) {
var e = $(a), c = $(d), b = c.offset().top;
function f() {
var m = $(window).scrollLeft(), n = $(window).scrollTop(), k = $(document).height(),
h = $(window).height(), g = e.height(), j = c.height(),
l = e.offset().left + e.outerWidth(true) - m, i = parseInt(g - h) - parseInt(j - h);
if (k < h || j > g || n < b || n <= j - h + b) {
c.removeAttr("style")
} else {
if (h > j && (n - b) >= i || h < j && (n - b) >= (g - h)) {
c.attr("style", "margin-top:" + i + "px;")
} else {
c.attr("style", "_margin-top:" + (n - b) + "px;position:fixed;left:" + l + "px;" + (h > j ? "top" : "bottom") + ":0;")
}
}
}
$(window).resize(f).scroll(f).trigger("resize")
}
};
HomeScrollR("#left", "#right");
</script>
</body>
</html>
