Gezinme nesnesini görünür pencerede tutmak için jQuery'yi kullanma

Question

Yazmak için ne yapmak istediğimin uzun bir açıklamasını yazmanın tam ortasındaydım, "Nasıl Yapılır/Biçimlendir" kenar çubuğunun bunun üzerinde aynı olduğunu fark ettiğimde Bir Soru "sayfa tam olarak ne istiyorum yapar. Temel bölüm, görünür bölümün üstünden kaymaya başlamadıkça, ana bölümle en üstte kalacak şekilde, ekranın geri kalanıyla uyum içinde yukarı ve aşağı kaydırır. Bu noktada, kenar çubuğu kaydırmayı durdurur ve görünür pencerenin üst kısmına tamamen yerleştirilmiş gibi davranmaya başlar.

Bu "Ask (Sor)" ekranındaki kaynak kod ve komut dosyalarını incelemeyi denedim, ancak çok fazla imkansız olduğunu düşünüyorum (benim için, en azından). JQuery'nin bu tür bir şeyi gerçekten çok basitleştirdiğini varsayıyorum, ama benim için yeniyim, bu yüzden kendim için zor bir zaman geçiriyorum. (Ve eğer bu ortak bir soruya dönüşürse, özür dilerim - yaklaşık bir saat aradım ama bir cevap alamadığım için çok sıkça yazılmış jQuery soruları var. .)

Yardımlarınız için şimdiden teşekkür ederiz.

Answer 1

Bu, Apple'ın Applestore Sayfasında bulunan bir alışveriş kartı örneğidir.

mantık:

• onay yapışkan eleman
• onay üst pencere
• yapışkan eleman

için CSS sınıfı eklemek veya kaldırmak olduğunu kaydırma olayı olduğu

jQuery:

$(document).ready(function() { 
// check where the shoppingcart-div is 
var offset = $('#shopping-cart').offset(); 

$(window).scroll(function() { 
    var scrollTop = $(window).scrollTop(); // check the visible top of the browser 

    if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed'); 
    else $('#shopping-cart').removeClass('fixed'); 
    }); 
}); 

CSS: Burada

.fixed { 
     position: fixed; 
     top: 20px; 
     margin-left: 720px; 
     background-color: #0f0 ! important; } 

example Link

Answer 2

Sadece kaydırma yaparken ekrandaki bir nesneye tutmak kadar çırpılmış biraz snippet'tir.

CANLI DEMO

http://jsfiddle.net/Jaybles/C5yWu/

HTML

<div id='object'>Top: 0px</div> 

CSS

#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;} 

jQuery (Timer + Animasyonla)

$(window).scroll(function(){ 
    var objectTop = $('#object').position().top; 
    var objectHeight = $('#object').outerHeight();  
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    if (windowScrollTop > objectTop) 
     $('#object').css('top', windowScrollTop); 
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight)) 
     $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);   

    $('#object').html('Top: ' + $('#object').position().top + 'px'); 

}); 

GÜNCELLEME ÖRNEK

http://jsfiddle.net/Jaybles/C5yWu/2/

Answer 3

bu jQuery

$(document).scroll(function() { 
    var objectTop = $('#shopping-cart').position().top; 
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    if((objectTop+objectHeight) <= $('html').outerHeight()) 
     $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight); 
    else 
     $('#'+cont).css('top', $('html').outerHeight()- objectHeight); 
}); 

olarak alt kullanımına tutmak gerekiyorsa

Css

#shopping-cart{ 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
} 

bunu büyü yapmak ve dont bu jquery gibi üst kullanımına

$(document).scroll(function() { 
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 

    $('#shopping-cart').css('top', windowScrollTop); 

}); 

Css

#shopping-cart{ 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

tutmak gerekiyorsa stillerini tutmayı unutma pozisyonları ve bir şey onun internet explorer ile çalışmaz 8.0.7

Answer 4

Ve eğer sadece bir tarayıcıda bir yerde tutmanız gerekiyorsa, javascript'e ihtiyacınız yoktur, bunu CSS ile yapabilirsiniz.

#chatt-box { 
    right: 5px; 
    height: auto; 
    width: 300px; 
    position: fixed; 
    bottom: 0px; 
}