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

Question

我想在用户上下滚动网页时在窗口顶部保留一个 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>

Answer 1

你能定位 tallDiv 绝对和右对齐吗？ (例如:绝对位置；右:100px；)