m0_46602893 2021-05-12 18:38 采纳率: 91.5%
浏览 20
已结题

JS缓冲菜单问题？菜鸟问题

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #box{width: 100px;height: 100px;background-color: red;position: absolute;}
            #box1{width: 100%;height: 1000px;}
      </style>
      <script>
            window.onload = function(){
                  Change(300);
                  var BOX = document.getElementById("box")
                  
                  window.onscroll = function(){
                        Change(300);
                  }
            }
            var timer = null;
            Change = function(goal){
                  var BOX = document.getElementById("box");
                  clearInterval(timer);
                  
                  timer = setInterval(function(){
                        var speed = (goal - BOX.offsetTop) / 8;
                        BOX.style.top = BOX.offsetTop + speed +"px";
                  }
                  ,30)
            }
            
      </script>
</head>
<body>
      <div id="box1">
            <div id="box"></div>
      </div>
</body>
</html>

我已经加了

window.onscroll = function(){

                        Change(300);

                  }

为什么滚动的时候box它不跟随着滚动位置自动缓冲到top = 30px的位置呢？

我把window改成box1或者box也不行（当然都是先get到他们的id值）

  • 写回答

1条回答 默认 最新

  • 穆瑾轩 2021-05-12 21:57
    关注

    你不应该相对于BOX.offsetTop 应该是用300+self.pageYOffset 相对于滚动条的位置

    <!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            #box{width: 100px;height: 100px;background-color: red;position: absolute;}
            #box1{width: 100%;height: 1000px;}
      </style>
      <script>
            window.onload = function(){
                  Change(300,0);
                  var BOX = document.getElementById("box")
                  window.onscroll = function(){
                  	    var scY = getPageScrollY();
                        Change(300,scY);
                  }
            }
            var timer = null;
            Change = function(goal,start){
                  var BOX = document.getElementById("box");
                  clearInterval(timer);
                  timer = setInterval(function(){
                        var speed = (start+goal - BOX.offsetTop) / 8;
                        BOX.style.top = BOX.offsetTop + speed +"px";}, 30)
                  }

		function getPageScrollY() {
			var yScroll;
			if(self.pageYOffset) {
				yScroll = self.pageYOffset;
			} else if(document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
				yScroll = document.documentElement.scrollTop;
			} else if(document.body) { // all other Explorers
				yScroll = document.body.scrollTop;
			}
			return yScroll;
		}
		      
      </script>
</head>
<body>
      <div id="box1">
            <div id="box"></div>
      </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • JS缓冲菜单问题？菜鸟问题 javascript
    2021-05-12 18:38
    回答 1 已采纳 你不应该相对于BOX.offsetTop 应该是用300+self.pageYOffset 相对于滚动条的位置 <!DOCTYPE html> <html lang="en"&g
  • JS缓冲运动的问题？ javascript
    2021-05-12 12:34
    回答 1 已采纳 除以18 speed出现小数点变为浮点数，浮点数计算四则运算时会有精度丢失问题，导致BOX.offsetLeft == goal不匹配。 除以8 speed为整数，没有精度问题，所以能停止 要改下
  • 关于文件下载的问题，如何解决？ javascript spring boot 前端
    2023-03-08 12:55
    回答 6 已采纳 直接把你的前端代码改成这样试试： xiazai() { this.$http.get('/admin/abc/xiazai/word', { responseType: 'blob' })
  • 各种问题汇总-部分答案
    2020-09-27 10:02
    高神龙拒绝做个菜鸟的博客 让JS最后加载 3，defer、async区别： defer 和 async 都是用于异步加载 JavaScript 脚本的属性，它们的区别在于脚本的加载和执行顺序。 defer 属性用于异步加载 JavaScript 脚本，但是脚本的执行会被推迟到页面解析...
  • Golang无缓冲通道大小？
    2018-01-12 09:13
    回答 3 已采纳 An unbuffered channel by definition doesn't have a buffer size. Sending blocks if there is somethi
  • 如何从该站点下载协议缓冲区v3？
    2019-04-22 02:15
    回答 1 已采纳 that binary is OS dependent and contains the protoc compiler to compile the protobuffs. protoc
  • C语言输出缓冲区问题 c语言
    2022-08-18 02:03
    回答 5 已采纳 你使用的操作系统是windows吗?windows的话输出是不带缓冲区的，在Linux 和 Mac OS系统上，输出才带有行缓冲区的
  • 前端笔记
    2019-09-29 02:58
    bansheng8492的博客 定义JS代码或引入外部JS文件 引入外部样式表文件 定义网页原信息 body内常用标签（HTML中的重点） 基本标签（块级标签和内联标签） 块级标签(独占一行)：p、h1--h6、hr、div,from ul ol li br ...
  • scanf输入getchar输入时读缓冲区问题 c++ c语言
    2023-03-18 12:47
    回答 3 已采纳 因为scanf使用%d读取整数时，会把前面的空白字符略去，然后读完整数后，再把后面的非数字字符放回输入流；所以，输入45 56 78回车，首先会把45,56,78依次读取到a，b，c，同时数之间的两个
  • 缓冲区溢出问题该咋解决 c++ c语言
    2023-02-28 23:27
    回答 4 已采纳 strcpy()里的sizeof(int)删掉，strcpy()只能接受两个参数。不会溢出，前面已经规定了p2比p1长度长一个字节（一char）。其次，cin>>p1不需要指针，char数
  • 各位看看哪里有问题？ c语言 有问必答
    2022-03-13 22:33
    回答 3 已采纳 主菜单和 scanf_s("%d", &n);要放在 while 中你题目的解答代码如下： int main(int argc, char* argv[]) { int n;
  • 前端追梦人CSS教程
    2020-11-09 17:23
    ilovethesunshine的博客 浏览器默认样式 优先级逐级增加的选择器列表: 通用选择器（*） 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 经验法则: Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important Only ...
  • 渗透测试 ( 0 ) --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
    2022-06-12 23:00
    擒贼先擒王的博客 Hackbar的许可证问题：https://blog.csdn.net/qq_45755030/article/details/119515945 hackbar-2.3.1-学习版：https://fengwenhua.top/index.php/archives/43/ retire.js ：扫描 Web 应用程序以使用易受攻击的...
  • Web安全——PHP基础
    2023-06-28 23:15
    君衍.⠀的博客 案例测试： $name='菜鸟'; //双引号 里面有变量会输出变量的值 $str ="这是 $name 的技术笔记分享"; //单引号 如果里面有变量都作为一个字符串处理 $str1 ='这是 $name 的技术笔记分享'; echo $str; echo $str1; ?>...
  • 渗透测试 2 --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
    2022-07-11 07:34
    「已注销」的博客 Hackbar的许可证问题：https://blog.csdn.net/qq_45755030/article/details/119515945 hackbar-2.3.1-学习版：https://fengwenhua.top/index.php/archives/43/ retire.js ：扫描 Web 应用程序以使用易受攻击的...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 9月4日
  • 已采纳回答 8月27日

悬赏问题

  • ¥15 使用yolov5-7.0目标检测报错
  • ¥15 对于这个问题的解释说明
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备