दृश्य विंडो के भीतर स्क्रॉलिंग ऑब्जेक्ट रखने के लिए jQuery का उपयोग

Question

मैं जो करना चाहता था उसके बारे में एक लंबा विवरण लिखने के बीच में था, जब मुझे एहसास हुआ कि इस पर "साइडबार बॉक्स कैसे पूछें/प्रारूपित करें" पूछें प्रश्न "पृष्ठ बिल्कुल करता है कि मैं क्या चाहता हूँ।

असल में, यह स्क्रीन के बाकी हिस्सों के साथ एकजुट होकर ऊपर और नीचे स्क्रॉल करता है, मुख्य अनुभाग के साथ शीर्ष-गठबंधन रहता है, जब तक कि मुख्य भाग दृश्य विंडो के शीर्ष तक स्क्रॉल नहीं करना शुरू कर देता है। उस समय, साइडबार बॉक्स स्क्रॉल बंद हो जाता है, और के रूप में यदि इसकी बिल्कुल उपयुक्त, दिखाई विंडो के शीर्ष के खिलाफ कार्रवाई करने शुरू होता है।

मैंने इस "पूछें" स्क्रीन पर स्रोत कोड और स्क्रिप्ट में खोदने की कोशिश की है, लेकिन इस पर बहुत कुछ चल रहा है कि यह बहुत असंभव है (मेरे लिए, कम से कम)। मैं यह सोचते हैं रहा है कि jQuery वास्तव में बात बिल्कुल स्पष्ट इस तरह का बना देता है, लेकिन मैं इसे करने के लिए नए हूँ, इसलिए मैं एक कठिन समय अपने आप के लिए यह पता लगाना हो रही है। (और अगर यह पता चला है एक आम सवाल है, मेरी क्षमा याचना होने के लिए - मैं लगभग एक घंटे के लिए खोज कर रहा है, लेकिन वहाँ तो कई बारीकी से शब्दों jQuery सवाल है कि मैं समर्थ हुए एक जवाब की खुदाई कर रहे हैं ।)

किसी भी मदद के लिए अग्रिम धन्यवाद।

Answer 1

यह एक ShoppingCart एप्पल Applestore पृष्ठ पर है के लिए एक उदाहरण है।

तर्क:

• जांच जहां चिपचिपा तत्व स्क्रॉल घटना जहां शीर्ष विंडो
• चिपचिपा तत्व

को जोड़ने या CSS वर्ग को दूर है पर

जांच है

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'); 
    }); 
}); 

सीएसएस:

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

example Link

Answer 2

यह एक छोटा सा टुकड़ा मैं सिर्फ स्क्रॉल करते हुए स्क्रीन पर किसी ऑब्जेक्ट को रखने के लिए ऊपर मार पड़ी है।

लाइव डेमो

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

एचटीएमएल

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

सीएसएस

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

jQuery

$(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'); 

}); 

UPDATED उदाहरण (के साथ टाइमर + एनीमेशन)

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

Answer 3

अगर आप नीचे उपयोग पर यह इस 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); 
}); 

के रूप में रखने की जरूरत है

Css

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

अगर आप शीर्ष उपयोग पर यह इस jQuery के रूप में रखने के लिए

$(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; 
} 

यह जादू करते हैं और न होगा की जरूरत है अपनी शैलियों को साथ रखना भूल जाओ पदों, और एक चीज यह इंटरनेट एक्सप्लोरर 8.0.7

Answer 4

और यदि आपको केवल ब्राउज़र के किसी स्थान पर div को पकड़ने की आवश्यकता है तो आपको जावास्क्रिप्ट की आवश्यकता नहीं है जिसे आप सीएसएस के साथ कर सकते हैं।

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