Question

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

问题是如果用户进行水平滚动，则tallDiv似乎向左或向右移动，而fixedDiv保持放置。我的问题是如何让tallDiv不再“移动？”

我尝试通过跟踪$（document）.scrollLeft（）并在水平滚动期间将tallDiv的位置设置为“fixed”来检测$（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;）

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

1 个答案: