jquery滚动tab吸顶,点击tab选项卡对应内容滚动到固定位置,滚动内容的同时选中对应tab选项卡

粗略demo代码效果:
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

<style>
        ul{
            height: 1rem;
            background-color: aliceblue;
            display: flex;
            color: aqua;
            width: fit-content;
        }
        .ulFa{
            width: 100vw;
            overflow-x: scroll;
        }
        li{
            width: 1rem;
            flex: 1;
        }
        .none{display: none;}
        .fixedaa{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }
        .act{
            border: 3px solid;
        }
    </style>
<div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div>dsfjdskfjdksjfkdsj</div>
        <div class="ulFa">
            <ul id="aa">
                <li class="act">111</li>
                <li>222</li>
                <li>333</li>
                <li>44444</li>
                <li>5555</li>
                <li>6666</li>
                <li>777</li>
                <li>8888</li>
                <li>99999</li>
                <li>101010</li>
            </ul>
        </div>
        <ul class="bb none"></ul>
        <div id="content">
            <div class="ayaya" id="type">
                <div class="ggg">
                    <p>111111111111和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>22222222222222和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>333333333333和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>444444444444和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>55555555555555和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>66666666666和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>77777777777和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>88888888888888和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>999999999999和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
                <div class="ggg">
                    <p>10101010和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                    <p>和v绝对是发到手机恢复大师积分返回的是返回的数据回复的数据返回的是发生的纠纷好的双方的</p>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
        var contTopList = [],
            ceiling = $('#aa').offset().top,
            antiShaking = 1
            curNav = 0;
        var abc = document.querySelector('#aa').clientHeight
        $('.ggg').each(function(i) {
            contTopList.push($(this).position().top - abc);
        });
        var len = contTopList.length;
        let timer = null
        $('ul li').on('click', function() {
            let index = $(this).index()
            $(this).addClass('act').siblings().removeClass('act')
            antiShaking = 0
            $('html,body').animate({scrollTop:$('.ggg').eq(index).offset().top-abc},300);
            timer = setTimeout(() => {
                antiShaking = 1
                timer = null
            },300)
        })
        window.addEventListener('scroll',function () {
            var _scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(ceiling <= _scrollTop){
                $('#aa').addClass('fixedaa')
                $('.bb').removeClass('none')
            }else{
                $('#aa').removeClass('fixedaa')
                $('.bb').addClass('none')
            }
            if(antiShaking == 1){
                for (var i = 0; i < len; i++) {
                    if (_scrollTop < contTopList[i]) {
                        changeNav(0);
                        break;
                    } else if (_scrollTop >= contTopList[len - 1]) {
                        changeNav(len - 1);
                        break;
                    } else if (_scrollTop > contTopList[i - 1] && _scrollTop < contTopList[i + 1]) {
                        changeNav(i);
                        break;
                    }
                }
            }
        })
        function changeNav(index) {
            if (index != curNav) {
                let ui = index+1
                $('li:nth-child('+ ui +')').addClass('act').siblings().removeClass('act')
            }
            curNav = index;
        }
        function compare(a,b,c) {
            if(a <= b && b <= c){
                return true
            }
            return false
        }
    </script>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现元素固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下: 1. 在Vue的组件中,通过`mounted`钩子函数监听页面滚动事件: ``` mounted() { window.addEventListener('scroll', this.handleScroll); } ``` 2. 在`methods`中定义`handleScroll`方法来处理滚动事件,并使用`scrollTop`属性获取页面滚动位置: ``` methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来决定元素的样式或位置 // ... } } ``` 3. 在模板中,使用动态绑定的方式来设置元素的样式或位置。可以通过绑定CSS类名或行内样式实现,以下是两种常见的实现示例: - 使用CSS类名: 在data中定义一个`isFixed`变量,根据滚动位置的条件来切换`isFixed`的值,在模板中绑定CSS类名根据`isFixed`的值设置元素的样式: ``` data() { return { isFixed: false, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件,如果满足条件则设置isFixed为true,否则为false this.isFixed = scrollTop > 100; }, }, ``` 在模板中绑定CSS类名,并设置元素的样式: ``` <div :class="{ 'fixed': isFixed }">固定的元素</div> <style> .fixed { position: fixed; top: 0; left: 0; } </style> ``` - 使用行内样式: 直接通过绑定`style`属性来设置元素的样式: ``` data() { return { topPosition: 0, }; }, methods: { handleScroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 根据scrollTop的值来判断是否满足条件,如果满足条件则设置topPosition为固定位置,否则为0 this.topPosition = scrollTop > 100 ? '100px' : '0'; }, }, ``` 在模板中绑定行内样式: ``` <div :style="{ top: topPosition }">固定的元素</div> ``` 通过以上步骤就可以实现元素固定位置的效果了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值