固定滚动JS源码

一时失言乱红尘 2022-08-04 05:10 97阅读 0赞

HTML和CSS部分

<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script type="text/javascript" src="base.js"></script>
        <title>固定滚动</title>
    </head>
        <body>
            <div class="scroll" id="scroll">
                <img src="img1/baihuzi.jpg">
                <img src="img1/aisi.jpg">
                <img src="img1/suolong.jpg">
                <img src="img1/shanzhi.jpg">
                <img src="img1/baihuzi.jpg">
                <img src="img1/aisi.jpg">
                <img src="img1/suolong.jpg">
                <img src="img1/shanzhi.jpg">
    
            </div>
            <div class="fix" id="fix">
                <img src="img2/baihuzi.jpg">
                <img src="img2/aisi.jpg">
                <img src="img2/suolong.jpg">
                <img src="img2/aisi.jpg">
                <img src="img2/suolong.jpg">
                <img src="img2/aisi.jpg">
                <img src="img2/suolong.jpg">
                <img src="img2/aisi.jpg">
                <img src="img2/suolong.jpg">
                <img src="img2/aisi.jpg">
            </div>
        </body>
    </html>
    //CSS
    *{
        margin: 0px;
        padding: 0px;
    }
    .scroll{
        width: 66%;
        margin: 10px 10px;
        height: auto;
        float: left;
    }
    .scroll img{
        max-width: 100%;
    }
    .fix{
        width: 33%;
        height: auto;
        margin: 10px 10px;
        float: right;
        position: fixed;
        top: 5px;
        right: 0px;
    }
    .fix img{
        max-width: 100%;
        float: right;
    }

**JS部分**

效果图  
![这里写图片描述][20150818113801237]

右边的固定栏没有变化，左边的可以滚动  
![这里写图片描述][20150818113814252]

[20150818113801237]: /images/20220731/9cdd72e286cd4734b0bc573b1a64cc40.png
[20150818113814252]: /images/20220731/d64f0479a6074eb19782fdfd5c5a63f8.png