jQuery的 - 如何做一個固定的股利滾動垂直滾動

這是種以下的變化後水平，但有一點不同：How do I get a fixed position div to scroll horizontally with the content? Using jQuery jQuery的 - 如何做一個固定的股利滾動垂直滾動

這裏是我的變化：http://jsfiddle.net/Bdwc4/

基本上，我會希望能夠看到div最右側的「x」，並且爲了這樣做，div必須是絕對的。但同時，我需要在垂直滾動時固定div。換句話說，您應該始終能夠在垂直或水平滾動的同時在該固定位置看到「x」。它有點像我想要它做的，但只有當你在窗口的頂部。無論您垂直滾動的位置如何，我都希望能夠水平滾動。

如果您選擇不使用上面的jsfiddle，這裏是我使用的代碼：在

<style> 
.scroll_fixed { 
    left:500px; 
    position:absolute 
} 
.scroll_fixed.fixed { 
    position:fixed 
} 
.x { float:right } 

.foo { background-color: red; width: 150px; height:150px; left:500px } 
body { width: 500px } 
.header { margin-top: 100px } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script> 
$(window).scroll(function(event) { 
    var x = 0 - $(this).scrollLeft(); 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y) { 
     // if so, ad the fixed class 
     $('.scroll_fixed').addClass('fixed'); 
    } else { 
     // otherwise remove it 
     $('.scroll_fixed').removeClass('fixed'); 
    } 
}); 
</script> 
<div class="header"></div> 
<div class="scroll_fixed foo"><div class="x">x</div></div> 
<div> 
    Enter a very long string of text 
</div>

後您的代碼輸入，水平和垂直縮小瀏覽器窗口，直到「X」紅色框不在視圖中，這將迫使您水平滾動以查看它，而當您垂直滾動時，紅色框應處於固定位置。

來源

2011-03-04 James Nine