运动框架（js）—上下滑动的侧边栏

最新推荐文章于 2022-08-16 10:40:38 发布

原创最新推荐文章于 2022-08-16 10:40:38 发布 · 637 阅读

1 ·

CC 4.0 BY-SA版权

javascript实例专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用CSS样式和JavaScript实现元素随滚动条平滑移动的案例。通过设置元素的绝对定位并结合JavaScript来监听滚动事件，实现了动态调整元素位置的效果。文章详细展示了如何利用startMove函数控制元素平滑移动，并提供了完整的CSS、HTML及JavaScript代码。

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

css：

#div{
    width:100px;
    height:200px;
    background: goldenrod;
    position: absolute;
    right:0;
}
 #div span{
     width: 25px;
     height: 70px;
     position: absolute;
     right:100px;
     top:65px;
     background: rebeccapurple;
     color:#fff;
 }

html:

<body style="height: 2000px;">
<div id="div">
    <span>分享到</span>
</div>

<body/>

js:

window.onscroll=function () {
    var oDiv=document.getElementById("div");
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var client=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;

    var t=scrollTop+client;
    startMove(parseInt(t))}//运动框架    var timer=null;//timer写在函数外    function startMove(itarget) {        var oDiv=document.getElementById("div");        clearInterval(timer);        timer=setInterval(function () {            var iSpeed=(itarget-oDiv.offsetTop)/8;            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed)            if(oDiv.offsetTop==itarget){                clearInterval(timer)            }else{                oDiv.style.top=oDiv.offsetTop+iSpeed+"px";            }        },30)    }