m0_46602893
2021-05-12 18:38
采纳率: 96.2%
浏览 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>
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题