消除相對定位div的水平滾動

我想在用戶在網頁上下滾動時在窗口頂部保留一個div（id ='fixedDiv'）。該頁面還有另一個更高的div（id ='tallDiv'）。我希望用戶上下滾動頁面以查看tallDiv的內容，並在滾動期間始終將fixedDiv顯示在窗口的頂部。消除相對定位div的水平滾動

問題是，如果用戶進行水平滾動，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>

來源

2015-05-08 user2797166

可以定位tallDiv絕對和右對齊？（例如：絕對位置;右：100px;）

來源

2015-05-08 02:35:38 Fetz

消除相對定位div的水平滾動

回答

相關問題