jquery - 如何使按钮上添加的复选标记符号与其一起滚动？-6ren

jquery - 如何使按钮上添加的复选标记符号与其一起滚动？

转载作者：行者123 更新时间：2023-11-28 02:49:58

我想在按钮上添加一个复选标记符号来指示访问过的页面，但我不知道如何让它随着按钮滚动？我成功放置符号的唯一方法是查看此处的答案以添加复选标记符号，例如使用绝对位置添加通知符号。 ( Easiest css for Facebook style "red" notifications )

但是绝对位置使得复选标记不可滚动，那么我怎样才能将符号添加到它并使其可以使用按钮滚动？我想达到的效果附在这里。

enter image description here

body{
    margin:0;
    height:100%;
    width:100%;
    overflow:hidden;
}
iframe{
    height: calc(100% - 90px);
    width: 1px;
    min-width: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.ribbon{
    height:125px;
    width:100%;
    position: fixed;
    bottom: 0;
    background:#F4F4F4;
    z-index:1000;
    font-family: 'Helvetica',sans-serif;
}

.ribbon-buttons{
    overflow: auto;
    width:100%;
    height:100px;
    padding-top: 8px;
    white-space: nowrap;
}

.ribbon-button {
    overflow: auto;
    height:65px;
    line-height:44px;
    display:inline-block;
    background-color:#D6D6D6;
    width:65px;
    border-radius:50px;
    margin-right:26px;
    margin-left:9px;
    opacity: 0.6;
}


.logo{
    width:55px;
    height:55px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin:5px;
}



.active {
    background-color:#50E3C2;
    opacity: 1; 
}

.checkmark{
    width:15px;
    height:15px;
    background-image: url('checkmark.png');
    position:absolute;
    left: 65;
    top: 50;
    display:inline-block;
}

    <body>
<div class="ribbon">
        <div class="ribbon-buttons">
            <div class="ribbon-button active">
                <div class="logo" ></div><div class="checkmark"></div>
            </div>