jQuery - yatay Bu Aşağıdakilerden bir varyasyon türüdür dikey

kaydırma sonra sabit bir div kaydırma yapmak, ama nasıl biraz farklı: İştejQuery - yatay Bu Aşağıdakilerden bir varyasyon türüdür dikey

How do I get a fixed position div to scroll horizontally with the content? Using jQuery benim varyasyonu: http://jsfiddle.net/Bdwc4/

Temelde, isterim div'un en sağında "x" olduğunu görebilmek ve bunu yapmak için div mutlak olmalıdır. Ama aynı zamanda, dikey olarak kaydırırken sabitlenecek div'a ihtiyacım var. Diğer bir deyişle, dikey veya yatay olarak kaydırırken, sabit konumdaki "x" yi her zaman görebilmeniz gerekir. Yapmamı istediğim şeyi yapar, ama sadece pencerenin üstündeyken. Dikey olarak kaydırdığınız yere bakılmaksızın yatay olarak kaydırmak isterim.

kodda girdikten sonra

<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" kadar yatay ve dikey olarak tarayıcı penceresini küçültmek içinde:

Yukarıdaki jsfiddle kullanmamayı seçerseniz, burada kullanıyorum kodudur Kırmızı kutu görüntünün yatay olarak kaydırılmasını zorlayacak şekilde görünmüyor ve dikey olarak ilerlerken kırmızı kutu sabit bir konumda olmalıdır. Bu gibi

kaynak

2011-03-04 James Nine