上下滑动的侧边栏

野性酷女 2022-07-14 11:18 122阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Document</title>
       <style>
          div{
             width:100px;
             height:100px;
             background-color:red;
             position:absolute;
             height:100px;
             right:0;
          }
       </style>
    </head>
    <body style="height:2000px;">
       <script>
    
          window.onscroll=function () {
                var oDiv=document.getElementById('div');
             var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
             //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
             var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
             t=parseInt(t);
             startMove(t);
          }
          var timer=null;
          function startMove(target) {
             clearInterval(timer);
                var oDiv=document.getElementById('div');
                timer=setInterval(function () {
                var speed=(target-oDiv.offsetTop)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(oDiv.offsetTop==target){
                    clearInterval(timer);
                }else{
                        oDiv.style.top=oDiv.offsetTop+speed+'px';
                }
                },30)
            }
    
       </script>
       <div id="div"></div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关如何关闭 Microsoft Edge 上的侧边栏

在 [Microsoft Edge][] 上，右侧的边栏可让您快速访问 Microsoft 365 和文件以及其他产品，例如 Outlook、搜索、游戏和工具，包括 Desig

朴灿烈づ我的快乐病毒、/ 2024年02月05日 16:59/ 0 赞/ 6 阅读

相关 requireJs sass侧边栏

koala 下载将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数调用 5 @import "xxx"

爱被打了一巴掌/ 2023年08月17日 16:20/ 0 赞/ 135 阅读

相关 21Flutter Drawer侧边栏、以及侧边栏内容布局

Tabs.dart import 'package:flutter/material.dart'; import 'tabs/Home.dart';

落日映苍穹つ/ 2023年08月17日 15:59/ 0 赞/ 141 阅读

相关小米侧边栏--css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

悠悠/ 2023年07月02日 09:26/ 0 赞/ 54 阅读

相关 VScode的侧边栏设置

文章目录说是\`CSDN\`全站第一应该不过分吧？导读寻找侧边栏配置文件和\`Windows\`不太一样的安装目录和存储文件

╰+哭是因爲堅強的太久メ/ 2022年12月26日 09:25/ 0 赞/ 344 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 344 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 339 阅读

相关上下滑动的侧边栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年07月14日 11:18/ 0 赞/ 123 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 400 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 709 阅读