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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

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

悬赏问题

  • ¥20 iOS绕地区网络检测
  • ¥15 python验证码滑块图像识别
  • ¥15 根据背景及设计要求撰写设计报告
  • ¥15 QT6颜色选择对话框显示不完整
  • ¥20 能提供一下思路或者代码吗
  • ¥15 用twincat控制!
  • ¥15 请问一下这个运行结果是怎么来的
  • ¥15 单通道放大电路的工作原理
  • ¥30 YOLO检测微调结果p为1
  • ¥15 DS18B20内部ADC模数转换器