javascript - 移动滚动条时始终保持窗口居中

标签 javascript jquery

我正在尝试构建一个位于屏幕中心的窗口,当我向下滚动时它将始终位于中心,我尝试了以下代码:

  <style>
  #Window {
 display: none;
 text-align: center;
 border: 1px solid #333;
  position:absolute;
  width: 200px;
  height: 80px;
  z-index:9999;
  background:#fff;
  border-radius: 5px;
  padding: 10px;
     }
  </style>

  <script>
      $("#window").css('top', 200);
     $("#window").css('left', winW/2- $("#window").width());
   $(window).scroll(function () { 

         var winH = $(window).height();
          setTimeout( function(){
   $('#alertWindow').animate({'top':winH/2-$("#window").height()/2},200);
 }, 1000);
      });     
  </script>

 <div id="window">this is scroll window</div>

问题是,当我向下滚动时,窗口第一次移动到中心,这是有效的,但是当我再次滚动时,它不会继续移动到中心,我认为滚动函数只被调用一次,当我向下或向上滚动时,如何使窗口不断移动到屏幕的中心,任何人都可以帮助我,抱歉,如果我确实提供了整个代码。

最佳答案

你所需要的只是CSS。

只需使用位置:固定

关于javascript - 移动滚动条时始终保持窗口居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8014350/

相关文章:

javascript - 如何用 JavaScript 在 Canvas 上绘制圆 Angular 矩形的下半部分

javascript - 如何使用 NativeScript 从 java.util.Set java 服务创建 JavaScript 数组到 Android 中

javascript - Instafeed 脚本不工作

javascript - Jquery选择器-根据属性值获取元素

jquery - 使用 asp.net core 和 Jquery 从 ajax 请求将对象绑定(bind)到 asp mvc Controller

javascript - 如何使用 Flask 和 jQuery 显示/隐藏回复文本框?

javascript - jQuery 使用 name 属性选择多个元素的属性值

javascript - chrome.storage.sync 未定义错误

javascript - 区分日语汉字建议的 "Enter"按键和其他 "Enter"事件

javascript - 与 jquery 脚本冲突