javascript - 消除相对定位div的水平滚动

我想在用户向上和向下滚动网页时在窗口顶部保留一个div（id ='fixedDiv'）。该页面还有另一个更高的div（id ='tallDiv'）。我希望用户上下滚动页面以查看tallDiv的内容，并且fixedDiv始终在滚动过程中显示在窗口顶部。

问题是，如果用户进行水平滚动，tallDiv似乎向左或向右移动，而fixedDiv保持不变。我的问题是如何使tallDiv远离“移动”？

我试图通过跟踪$（document）.scrollLeft（）并在水平滚动过程中将tallDiv的位置设置为“固定”来检测$（window）.scroll事件中的水平滚动。然后，我使用计时器将tallDiv的位置重新设置为“相对”，但这很难看。

有人对我如何实现自己想要的东西有任何想法吗？我的代码如下：

function SetScrollable() {
  $('#tallDiv').css('position', 'relative');
}

var lastScrollLeft;

$(window).scroll(function (event) {
  // what the y position of the scroll is
  var documentScrollLeft = $(document).scrollLeft();
  if (lastScrollLeft != documentScrollLeft) {
    lastScrollLeft = documentScrollLeft;
    $('#tallDiv').css('position', 'fixed');
    setTimeout('SetScrollable()', 500);
  }
  else {
    $('#tallDiv').css('position', 'relative');
  }
});

<form id="form1" runat="server">
  <div id="fixedDiv" style="position:absolute;background-color:yellow; height:40px; width:40px;" >
  </div>

  <div id="tallDiv" style="position:relative; left:300px; top:0px; background-color:green; height:400px; width:40px;" >
  </div>
</form>

最佳答案

您可以将tallDiv定位为绝对和右对齐吗？ （例如：绝对位置；右：100px;）