जावास्क्रिप्ट या Jquery: फिक्स्ड पोजिशन div

Question

पर स्क्रॉल करें, मैं एक HTML div चाहता हूं जो उपयोगकर्ता को पृष्ठ को स्क्रॉल करते समय स्क्रॉल करेगा और जब यह मूल टैग समाप्त होता है तो यह निश्चित स्थिति में पहुंच जाएगा। उदाहरण के लिए: - इस लिंक को देखें http://www.9gag.com/ उनके पास एक पृष्ठ पर पोस्ट करने के लिए बहुत कुछ है। जब हम एक पोस्ट स्क्रॉल करते हैं और पहली पोस्ट के अंत में जाते हैं, तो शीर्षक और शेयर बटन निश्चित स्थिति में बन जाते हैं और फिर दूसरी पोस्ट अगली पोस्ट के लिए समान होती है। बस इसी तरह। हम jquery या कच्चे जावास्क्रिप्ट या सीएसएस में यह कैसे कर सकते हैं।

Answer 1

$(window).scrollTop() आपको ब्राउज़र में स्क्रॉल किए गए पिक्सल की संख्या देगा, $('postcontainer').offset() आपको एक पोस्ट कंटेनर का एक्स, वाई स्थिति देगा।

तो अगर आप $(window).scroll() करने के लिए या mousescroll को एक घटना के लिए बाध्य है, तो आप देख सकते हैं कि postcontainer के offset().topwindow.scrollTop से कम है। यदि ऐसा है तो आप पोस्ट कंटेनर के सापेक्ष आइटम को नीचे ले जाना शुरू कर देते हैं। ऐसा करने पर आपको पोस्ट कंटेनर की ऊंचाई और चलती तत्व की ऊंचाई का ट्रैक रखने की आवश्यकता है ताकि यह सुनिश्चित किया जा सके कि यह कंटेनर के नीचे से नीचे नहीं जायेगा।

तो postcontainer.height - movingelement.position().top >= movingelement.height() तो आपको चलती तत्व की स्थिति को ठीक करने की आवश्यकता है। बैक अप स्क्रॉल करते समय विपरीत करें।

उम्मीद है कि यह आपको कुछ कोड निकालने और शुरू करने के लिए शुरू कर देगा।

Answer 2

शायद तुम इस प्लगइन की कोशिश करना चाहते: http://labs.anthonygarand.com/sticky/ स्टिकी एक jQuery प्लगइन है कि आप करने की क्षमता अपने पृष्ठ पर किसी भी तत्व हमेशा तत्व बनाकर दिखाई जारी किए जाने की रहने जब वे सीमा तक पहुँच गया बनाने देता है।

Answer 3

यह एक साधारण सीएसएस संपत्ति के साथ आपकी समस्या का समाधान है।

स्क्रॉल का पालन करने के लिए position:sticky का उपयोग करें।

यहां आलेख समझाया गया है।

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

और पुराने sticky position demo