演示

1.gif

代码

<!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>
Last modification：November 26, 2020
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏