javascript（但不是jQuery）在x轴上的固定位置，而不是y轴？

我到处都找过了，到目前为止还没有找到一个非jQuery js来处理这个问题。我希望避免仅为这一简单任务使用库

我想将三个导航div（“页眉”、“制表符”和“#页脚”）固定到视口左侧（或者，固定到div“#助手”的x位置，带有“位置：固定；左：0；顶部：0；”），但不固定y。它们不能垂直固定

我已经创建了一个工作的js，它强制div基于滚动重新定位，但是在真实页面中它并不平滑（太多的动态和图形元素）-我希望它可以平滑地设置动画，或者模仿固定的左侧，并且看起来根本不重新定位

任何人谁可以给指针或快速脚本，或审查和修改脚本，我已经做了？我注意到人们倾向于问为什么不使用明显的解决方案而不是回答问题。。。我很乐意回答，但更愿意帮助解决实际问题

下面是一个解决问题的方法：

---

谢谢你的帮助

平滑动画示例：

var box = document.getElementById('box');

var moveTo = function(obj, target) {
    // start position
    // you should obtain it from obj.style
    var cpos = {
        x: 0,
        y: 0
    }        
    var iv = setInterval(function(){
        cpos.x += (target.x - cpos.x) * 0.3; // 0.3 is speed
        cpos.y += (target.y - cpos.y) * 0.3; // 0.3 is speed
        obj.style.left = Math.floor(cpos.x) + 'px';
        obj.style.top = Math.floor(cpos.y) + 'px';
        var dist = Math.abs(cpos.y - target.y); // distance (x+y) from destination
        dist += Math.abs(cpos.x - target.x); // < 1 = object reached the destination

        if(dist < 1) { // here we are checking is box get to the destination 
           clearInterval(iv);
        }
    }, 30); // this is also the speed
}

box.onclick = function(){
    moveTo(box, {x: 90, y: 75}); // fire this function to move box to specified point
}

var-box=document.getElementById（'box'）；
var moveTo=功能（对象，目标）{
//起始位置
//您应该从obj.style获得它
变量cpos={
x:0,，
y:0
}        
var iv=设置间隔（函数（）{
cpos.x+=（target.x-cpos.x）*0.3；//0.3是速度
cpos.y+=（target.y-cpos.y）*0.3；//0.3是速度
obj.style.left=数学地板（cpos.x）+“px”；
obj.style.top=数学层（cpos.y）+“px”；
var dist=Math.abs（cpos.y-target.y）；//距离目标的距离（x+y）
dist+=Math.abs（cpos.x-target.x）；//<1=对象到达目标
如果（dist<1）{//这里我们选中的是“到达目的地”框
间隙（iv）；
}
}，30）；//这也是速度
}
box.onclick=function（）{
moveTo（长方体，{x:90，y:75}）；//启动此函数将长方体移动到指定点
}

• 演示：

脚本是您的工作，但这是如何解决动画问题的快速入门

您还可以使用速度执行一些奇特的操作，例如使用

sin（x）

来设置速度

• 演示#2（非常流畅）

---

• 此处为完整脚本

---

我认为没有直接的方法可以做到这一点
但这里有一个方法
首先，您需要能够在window.onscroll事件发生时检测滚动的方向。只要发生滚动事件，您就可以通过将当前页面偏移量与新获取的页面偏移量进行比较来实现这一点。(http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction)
现在假设您知道滚动的方向，您希望根据滚动的方向更改div的样式
让FixAtX成为要固定div的x坐标的值。 让原始为div的y坐标。 无论何时滚动，不管方向如何，都要记住页面偏移量X和Y。我们将它们称为OldX和OldY
如果垂直滚动：
• 将divs样式的位置值设置为绝对值
• 将divs样式的最大值设置为原始值
• 将divs样式的左值设置为OldX+FixAtX
如果水平滚动：
• 将divs样式的位置值设置为固定

---

• 将divs样式的最高值设置为OriginalY-OldY（这是为查看本文的人准备的-我最终使用了我最初在中提出的解决方案，该解决方案使用了一个简单的javascript来模拟fixed x
  第一个答案中的javascript很重，最后出现了错误，第二个答案听起来不错，但在实践中不起作用。因此，我推荐JSFIDLE（以下）中的javascript作为没有javascript库的fixed x和fluid y的最佳答案。它并不完美，延迟很小，但是我找到的最佳答案

  function fixLeft() {
  
              function getScrollX() {
                  var x = 0, y = 0;
                  if( typeof( window.pageYOffset ) == 'number' ) {
                      x = window.pageXOffset;
                  } else if( document.body && ( document.body.scrollLeft) ) {
                      x = document.body.scrollLeft;
                  } else if( document.documentElement && ( document.documentElement.scrollLeft) ) {
                      x = document.documentElement.scrollLeft;
                  }
                  return [x];
              }
  
              var x = getScrollX();
              var x = x[0];
  
          // have to get and add horizontal scroll position px
          document.getElementById('header').style.left = x + "px";
          document.getElementById('tabs').style.left = x + "px";
          document.getElementById('footer').style.left = x + "px";
      }
  
      window.onscroll = fixLeft;
  

  ---

  我很难在我的用例中使用它。对于滚动，它必须根据开始滚动和结束滚动测量开始和结束位置，然后对每个间隔进行平滑重新定位，对吗？替换严格的“90”值的最佳方法是什么对于脚本中的x，可以处理滚动？制作

  cpos

  全局变量并设置开始位置。例如：

  target.x

  将是您的

  getScrollX（）

  结果，我想。@DeborahSpeece我为您制作了这个脚本：）我更改了

  位置：fixed

  ，制作了

  iv

  全局，我还添加了

  clearinterval

  这太迷人了！：）我在一个jsFiddle jsFiddle.net/wvfX9/43中使用了你的脚本，但它没有重新定位-我做错了什么吗？@DeborahSpeece我不得不对我的脚本做了很多更改。给你：-最重要的是我的脚本现在可以处理许多div。我想这就是我正在使用的脚本基本上已经在做的事情-它使用style=“left:（scroll value）；”重新定位div。但它在真实页面中看起来很不稳定，需要平滑，或者不需要重新定位-只需要将所需的div保持在视口左侧（但不垂直固定），而不在滚动事件中移动或重新定位。这是一个JSFIDLE-嗯，我想我还不够清楚。我的代码不会“更新”任何值。它使用“位置：固定”样式使浏览器重新定位div。如果水平滚动，则使位置固定；如果垂直滚动，则使位置绝对。所以，当您确定滚动的方向时，只需更改position的样式值一次。你不是经常“起来”