कैसे करें - स्टिकी इमेज
CSS के साथ स्टिकी इमेज बनाने का तरीका जानें।
चिपचिपा छवि
नोट: यह उदाहरण इंटरनेट एक्सप्लोरर या एज 15 और पुराने संस्करणों में काम नहीं करता है।
चिपचिपा छवि
उदाहरण
img.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
के साथ एक तत्व position: sticky;
उपयोगकर्ता की स्क्रॉल स्थिति के आधार पर स्थित है।
एक चिपचिपा तत्व स्क्रॉल स्थिति के आधार पर relative
और के बीच टॉगल करता है। fixed
व्यूपोर्ट में दी गई ऑफ़सेट स्थिति मिलने तक इसे सापेक्ष स्थिति में रखा जाता है - फिर यह जगह पर "चिपक जाता है" (जैसे स्थिति: निश्चित)।
नोट: इंटरनेट एक्सप्लोरर, एज 15 और पुराने संस्करण स्टिकी पोजिशनिंग का समर्थन नहीं करते हैं। सफारी को एक -webkit- उपसर्ग की आवश्यकता होती है (नीचे उदाहरण देखें)। आपको काम करने के लिए कम से कम एक , या स्टिकी पोजिशनिंग के लिए भी top
निर्दिष्ट करना होगा right
।bottom
left
CSS पोजिशनिंग के बारे में अधिक जानने के लिए, हमारा CSS पोजिशन ट्यूटोरियल पढ़ें।
इमेज को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए, हमारे CSS इमेज ट्यूटोरियल को पढ़ें।