跳骚知识（二）本着为日后赋能设计需求提供些思路，记录下一些交互实现-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_30961847/article/details/110929806

本文介绍两种实现分组列表顶部栏吸顶效果的方法：一是使用CSS粘性定位(position: sticky)，二是通过JavaScript动态调整DOM位置。CSS方法简单直接但存在浏览器兼容性问题，JavaScript方法灵活性更高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分组列表悬浮顶部栏(吸顶效果如下图)

（侵图删）

实现如上，思路有二：

css是否可以直接实现（#粘性定位#即position的sticky）
js操作Dom

思路一

使用粘性定位（position:sticky）只需要设置top值就可以在滚动到相应值时固定，用法简单但有一定的兼容性问题，如某些浏览器不支持此属性值需要自己做兼容(chrome和safari需要position:-webkit-sticky)。

Tips:粘性定位是相对于（BFC）和最近的块先元素定位，所以部分情况不适用，要根据需求判定使用。

html

<div class="search-content"><div class="area-card"><div class="title-item">A</div><div class="area-item">安道尔&nbsp;+376</div><div class="area-item">奥地利&nbsp;+43</div><div class="area-item">澳大利亚&nbsp;+61</div><div class="area-item">阿尔巴尼亚&nbsp;+355</div><div class="area-item">阿尔及利亚&nbsp;+213</div><div class="area-item">爱尔兰&nbsp;+353</div><div class="area-item">阿富汗&nbsp;+93</div><div class="area-item">安哥拉&nbsp;+244</div><div class="area-item">安圭拉&nbsp;+1264</div><div class="area-item">阿根廷&nbsp;+54</div><div class="area-item">埃及&nbsp;+20</div><div class="area-item">阿鲁巴&nbsp;+297</div><div class="area-item">阿拉伯联合酋长国&nbsp;+971</div><div class="area-item">奥兰群岛&nbsp;+358</div><div class="area-item">阿曼&nbsp;+968</div><div class="area-item">阿塞拜疆&nbsp;+994</div><div class="area-item">埃塞俄比亚&nbsp;+251</div><div class="area-item">爱沙尼亚&nbsp;+372</div><div class="area-item">阿森松&nbsp;+247</div><div class="area-item">安提瓜和巴布达&nbsp;+1268</div></div><div class="area-card"><div class="title-item">B</div><div class="area-item">巴巴多斯&nbsp;+1246</div><div class="area-item">博茨瓦纳&nbsp;+267</div><div class="area-item">不丹&nbsp;+975</div><div class="area-item">冰岛&nbsp;+354</div><div class="area-item">波多黎各&nbsp;+1787</div><div class="area-item">白俄罗斯&nbsp;+375</div><div class="area-item">巴哈马&nbsp;+1242</div><div class="area-item">布基拉法索&nbsp;+226</div><div class="area-item">保加利亚&nbsp;+359</div><div class="area-item">巴基斯坦&nbsp;+92</div><div class="area-item">巴林&nbsp;+973</div><div class="area-item">波兰&nbsp;+48</div><div class="area-item">布隆迪&nbsp;+257</div><div class="area-item">巴拉圭&nbsp;+595</div><div class="area-item">比利时&nbsp;+32</div><div class="area-item">巴勒斯坦领土&nbsp;+970</div><div class="area-item">玻利维亚&nbsp;+591</div><div class="area-item">伯利兹&nbsp;+501</div><div class="area-item">百慕大&nbsp;+1441</div><div class="area-item">北马里亚纳群岛&nbsp;+1670</div><div class="area-item">贝宁&nbsp;+229</div><div class="area-item">巴拿马&nbsp;+507</div><div class="area-item">巴西&nbsp;+55</div></div><div class="area-card"><div class="title-item">C</div><div class="area-item">赤道几内亚&nbsp;+240</div><div class="area-item">朝鲜&nbsp;+850</div></div><div class="area-card"><div class="title-item">D</div><div class="area-item">德国&nbsp;+49</div><div class="area-item">多哥&nbsp;+228</div><div class="area-item">丹麦&nbsp;+45</div><div class="area-item">多米尼加&nbsp;+1767</div><div class="area-item">多米尼加共和国&nbsp;+1809</div></div><div class="area-card"><div class="title-item">E</div><div class="area-item">厄瓜多尔&nbsp;+593</div><div class="area-item">俄罗斯&nbsp;+7</div><div class="area-item">厄立特里亚&nbsp;+291</div></div><div class="area-card"><div class="title-item">F</div><div class="area-item">梵蒂冈城&nbsp;+379</div><div class="area-item">佛得角&nbsp;+238</div><div class="area-item">法国&nbsp;+33</div><div class="area-item">斐济&nbsp;+679</div><div class="area-item">芬兰&nbsp;+358</div><div class="area-item">菲律宾&nbsp;+63</div><div class="area-item">法罗群岛&nbsp;+298</div><div class="area-item">法属玻利尼西亚&nbsp;+689</div><div class="area-item">法属圭亚那&nbsp;+594</div></div><div class="area-card"><div class="title-item">G</div><div class="area-item">冈比亚&nbsp;+220</div><div class="area-item">关岛&nbsp;+1671</div><div class="area-item">瓜德罗普岛&nbsp;+590</div><div class="area-item">哥伦比亚&nbsp;+57</div><div class="area-item">格鲁吉亚&nbsp;+995</div><div class="area-item">格陵兰&nbsp;+299</div><div class="area-item">格林纳达&nbsp;+1473</div><div class="area-item">哥斯达黎加&nbsp;+506</div><div class="area-item">圭亚那&nbsp;+592</div></div><div class="area-card"><div class="title-item">H</div><div class="area-item">海地&nbsp;+509</div><div class="area-item">洪都拉斯&nbsp;+504</div><div class="area-item">韩国&nbsp;+82</div><div class="area-item">荷兰&nbsp;+31</div></div><div class="area-card"><div class="title-item">J</div><div class="area-item">吉布提&nbsp;+253</div><div class="area-item">吉尔吉斯斯坦&nbsp;+996</div><div class="area-item">捷克共和国&nbsp;+420</div><div class="area-item">加纳&nbsp;+233</div><div class="area-item">加拿大&nbsp;+1</div><div class="area-item">几内亚&nbsp;+224</div><div class="area-item">加蓬&nbsp;+241</div><div class="area-item">柬埔寨&nbsp;+855</div></div><div class="area-card"><div class="title-item">K</div><div class="area-item">克罗地亚&nbsp;+385</div><div class="area-item">喀麦隆&nbsp;+237</div><div class="area-item">科摩罗&nbsp;+269</div><div class="area-item">开曼群岛&nbsp;+1345</div><div class="area-item">肯尼亚&nbsp;+254</div><div class="area-item">科特迪瓦&nbsp;+225</div><div class="area-item">卡塔尔&nbsp;+974</div><div class="area-item">科威特&nbsp;+965</div></div><div class="area-card"><div class="title-item">L</div><div class="area-item">利比里亚&nbsp;+231</div><div class="area-item">黎巴嫩&nbsp;+961</div><div class="area-item">利比亚&nbsp;+218</div><div class="area-item">罗马尼亚&nbsp;+40</div><div class="area-item">留尼汪岛&nbsp;+262</div><div class="area-item">卢森堡&nbsp;+352</div><div class="area-item">莱索托&nbsp;+266</div><div class="area-item">立陶宛&nbsp;+370</div><div class="area-item">拉脱维亚&nbsp;+371</div><div class="area-item">老挝&nbsp;+856</div><div class="area-item">卢旺达&nbsp;+250</div><div class="area-item">列支敦士登&nbsp;+423</div></div><div class="area-card"><div class="title-item">M</div><div class="area-item">缅甸&nbsp;+95</div><div class="area-item">马达加斯加&nbsp;+261</div><div class="area-item">马尔代夫&nbsp;+960</div><div class="area-item">摩尔多瓦&nbsp;+373</div><div class="area-item">马耳他&nbsp;+356</div><div class="area-item">蒙古&nbsp;+976</div><div class="area-item">美国&nbsp;+1</div><div class="area-item">孟加拉国&nbsp;+880</div><div class="area-item">密克罗尼西亚&nbsp;+691</div><div class="area-item">马里&nbsp;+223</div><div class="area-item">秘鲁&nbsp;+51</div><div class="area-item">摩洛哥&nbsp;+212</div><div class="area-item">毛里求斯&nbsp;+230</div><div class="area-item">毛里塔尼亚&nbsp;+222</div><div class="area-item">马拉维&nbsp;+265</div><div class="area-item">马来西亚&nbsp;+60</div><div class="area-item">摩纳哥&nbsp;+377</div><div class="area-item">马其顿&nbsp;+389</div><div class="area-item">莫桑比克&nbsp;+258</div><div class="area-item">马绍尔群岛&nbsp;+692</div><div class="area-item">蒙塞拉特岛&nbsp;+1664</div><div class="area-item">美属萨摩亚&nbsp;+1684</div><div class="area-item">美属维尔京群岛&nbsp;+1340</div><div class="area-item">马提尼克&nbsp;+596</div><div class="area-item">墨西哥&nbsp;+52</div><div class="area-item">马约特&nbsp;+262</div></div><div class="area-card"><div class="title-item">N</div><div class="area-item">尼泊尔&nbsp;+977</div><div class="area-item">南非&nbsp;+27</div><div class="area-item">尼加拉瓜&nbsp;+505</div><div class="area-item">瑙鲁&nbsp;+674</div><div class="area-item">纳米比亚&nbsp;+264</div><div class="area-item">尼日尔&nbsp;+227</div><div class="area-item">尼日利亚&nbsp;+234</div><div class="area-item">挪威&nbsp;+47</div></div><div class="area-card"><div class="title-item">P</div><div class="area-item">帕劳&nbsp;+680</div><div class="area-item">葡萄牙&nbsp;+351</div></div><div class="area-card"><div class="title-item">R</div><div class="area-item">日本&nbsp;+81</div><div class="area-item">瑞典&nbsp;+46</div><div class="area-item">瑞士&nbsp;+41</div></div><div class="area-card"><div class="title-item">S</div><div class="area-item">苏丹&nbsp;+249</div><div class="area-item">圣诞岛&nbsp;+61</div><div class="area-item">萨尔瓦多&nbsp;+503</div><div class="area-item">塞尔维亚&nbsp;+381</div><div class="area-item">圣基茨和尼维斯&nbsp;+1869</div><div class="area-item">斯洛伐克&nbsp;+421</div><div class="area-item">塞拉利昂&nbsp;+232</div><div class="area-item">斯里兰卡&nbsp;+94</div><div class="area-item">苏里南&nbsp;+597</div><div class="area-item">斯洛文尼亚&nbsp;+386</div><div class="area-item">圣卢西亚&nbsp;+1758</div><div class="area-item">索马里&nbsp;+252</div><div class="area-item">圣马力诺&nbsp;+378</div><div class="area-item">塞内加尔&nbsp;+221</div><div class="area-item">圣皮埃尔和密克隆&nbsp;+508</div><div class="area-item">塞浦路斯&nbsp;+357</div><div class="area-item">塞舌尔&nbsp;+248</div><div class="area-item">沙特阿拉伯&nbsp;+966</div><div class="area-item">斯威士兰&nbsp;+268</div><div class="area-item">圣文森特和格林纳丁斯&nbsp;+1784</div></div><div class="area-card"><div class="title-item">T</div><div class="area-item">土耳其&nbsp;+90</div><div class="area-item">泰国&nbsp;+66</div><div class="area-item">汤加&nbsp;+676</div><div class="area-item">土库曼斯坦&nbsp;+993</div><div class="area-item">特克斯和凯科斯群岛&nbsp;+1649</div><div class="area-item">突尼斯&nbsp;+216</div><div class="area-item">坦桑尼亚&nbsp;+255</div><div class="area-item">图瓦卢&nbsp;+688</div></div><div class="area-card"><div class="title-item">W</div><div class="area-item">危地马拉&nbsp;+502</div><div class="area-item">乌干达&nbsp;+256</div><div class="area-item">乌克兰&nbsp;+380</div><div class="area-item">文莱&nbsp;+673</div><div class="area-item">乌拉圭&nbsp;+598</div><div class="area-item">委内瑞拉&nbsp;+58</div><div class="area-item">乌兹别克斯坦&nbsp;+998</div></div><div class="area-card"><div class="title-item">X</div><div class="area-item">西班牙&nbsp;+34</div><div class="area-item">新加坡&nbsp;+65</div><div class="area-item">新喀里多尼亚&nbsp;+687</div><div class="area-item">希腊&nbsp;+30</div><div class="area-item">叙利亚&nbsp;+963</div><div class="area-item">新西兰&nbsp;+64</div><div class="area-item">匈牙利&nbsp;+36</div></div><div class="area-card"><div class="title-item">Y</div><div class="area-item">印度&nbsp;+91</div><div class="area-item">约旦&nbsp;+962</div><div class="area-item">意大利&nbsp;+39</div><div class="area-item">印度尼西亚&nbsp;+62</div><div class="area-item">英国&nbsp;+44</div><div class="area-item">伊朗&nbsp;+98</div><div class="area-item">伊拉克&nbsp;+964</div><div class="area-item">也门&nbsp;+967</div><div class="area-item">牙买加&nbsp;+1876</div><div class="area-item">亚美尼亚&nbsp;+374</div><div class="area-item">越南&nbsp;+84</div><div class="area-item">以色列&nbsp;+972</div><div class="area-item">英属维尔京群岛&nbsp;+1284</div></div><div class="area-card"><div class="title-item">Z</div><div class="area-item">直布罗陀&nbsp;+350</div><div class="area-item">赞比亚&nbsp;+260</div><div class="area-item">乍得&nbsp;+235</div><div class="area-item">中非共和国&nbsp;+236</div><div class="area-item">中国&nbsp;+86</div><div class="area-item">中国澳门&nbsp;+853</div><div class="area-item">中国台湾&nbsp;+886</div><div class="area-item">中国香港&nbsp;+852</div><div class="area-item">智利&nbsp;+56</div></div></div>

css

        .search-content {
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth;
        }
        .search-content .title-item {
            width: 100%;
            height: 20px;
            line-height: 20px;
            background-color:#F7F7F7;
            color: #999999;
            padding-left: 20px;
            position: -webkit-sticky;
            position: -moz-sticky;
            position: -ms-sticky;
            position: sticky;
            top: 0;
        }
        .search-content .area-item {
            width:90%;
            margin:0 auto;
            height:40px;
            line-height:40px;
            box-sizing:border-box;
            border-bottom:.4px solid #e2e2e2;
            list-style:none;
        }
        .search-content .area-item:last-child {
            border-bottom:0;
        }

思路二

监听滚动条拉动距离，动态定位列表标题

html 同上

css

        .search-content .title-item {
            width: 100%;
            height: 20px;
            line-height: 20px;
            background-color:#F7F7F7;
            color: #999999;
            padding-left: 20px;
        }
        .search-content .title-item-fixed {
            position: fixed;
            top: 0;
        }
        .search-content .area-item {
            width:90%;
            margin:0 auto;
            height:40px;
            line-height:40px;
            box-sizing:border-box;
            border-bottom:.4px solid #e2e2e2;
            list-style:none;
        }
        .search-content .area-item:last-child {
            border-bottom:0;
        }

                    var title = document.getElementsByClassName('title-item'),// 标题布局样式相同,获取快捷统一
                        section = document.getElementsByClassName('area-card');// 区块父级元素
                    var titleOtList = [],       
                        len = title.length; // 标题数量
                    for(var i=0; i < len; i++) {
                        titleOtList.push(title[i].offsetTop);// 存放各标题的offsetTop值
                    }
                    $(window).scroll(function () {
                        var st = document.documentElement.scrollTop || document.body.scrollTop;
                        for(let i=0; i<len; i++) {
                            if(st > ot[i] && st < ot[i+1]) { 
                                title[i].className = 'title-item title-item-fixed';
                            } else {
                                title[i].className = 'title-item';
                            }
                        }
                    });

截图保存实现方案

诉求：生成截图，长按保存

插件使用：截屏功能插件-html2canvas

html

    <div id="app">
        <div id="img-content">
            <div class="shopping-result">
                <p class="result-text">购买成功！</p>
                <p class="number-code">初始密码:8ujds900</p>
                <p class="save-too">为避免忘记密码，请点下方按钮保存密码</p>
                <button id="save-btn">保存密码到手机相册</button>
            </div>
        </div>
        <div class="cutpicture-mask">
            <div class="close-btn">X</div>
            <div class="content-box"></div>
        </div>
    </div>

css

#app {
            position: relative;
            width: 750px;
        }
        #img-content {
            width: 100%;
            height: 200px;
            background: rgb(192, 245, 138);
            border: 1px solid rgb(173 255 47);
            border-radius: 10px 100px / 20px;
            text-align: center;
            position: fixed;
            bottom: 20px;
            left: 0;
        }
        .cutpicture-mask {
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgb(0 0 0 / 80%);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .close-btn {
            position: absolute;
            right: 20px;
            top: 10px;
            color: rgb(255 255 255);
        }
        .content-box{
            width: 300px;
            height: 200px;
            background: rgb(192, 245, 138);
            border: 1px solid rgb(173 255 47);
            border-radius: 10px 100px / 20px;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
        .content-box img {
            width: 100%;
            background: rgb(192, 245, 138);
            border: 1px solid rgb(173 255 47);
            border-radius: 10px 100px / 20px;
        }
        .content-box .tap-tip {
            color: rgb(186 182 39);
            font-size: 14px;
        }

        $('#img-content').on('click','#save-btn',function(){
            $('.content-box').html('');
            var cutpictureHtml = 
                '<p class="liang-number">尊 111 <span class="high-light">520</span></p>'+
                '<p class="number-code">初始密码:8ujds900</p>'+
                '<p class="number-phone">密保手机:122********</p>';
            $('.content-box').append(cutpictureHtml);
            $('.cutpicture-mask').show();
            new html2canvas($('.cutpicture-mask .content-box')[0]).then(canvas => {
                // canvas为转换后的Canvas对象
                let oImg = new Image();
                oImg.src = canvas.toDataURL();  // 导出图片
                $('.cutpicture-mask .content-box').html(oImg);  // 将生成的图片添加到body
                $('.cutpicture-mask .content-box').append('<p class="tap-tip">长按保存图片到相册</p>');  // 将生成的图片添加到body
            });
        });
        $('.cutpicture-mask').on('click','.close-btn',function(){
            $('.cutpicture-mask').hide();
        });