javascript - How to keep an element fixed top within another element? -

यहां और HTML है:

  & lt; div class = "wrapper" & gt; & Lt; div वर्ग = "धुंधला" & gt; & lt; / div & gt; & Lt; div class = "content" & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; पाठ & lt; br & gt; & Lt; / div & gt; & Lt; / div & gt;  

और CSS:

 । वाइपर {स्थिति: रिश्तेदार; चौड़ाई: 300px; ऊंचाई: 100 पिक्सेल; मार्जिन: 100 पिक्सल ऑटो; पृष्ठभूमि रंग: # C0C0C0; अतिप्रवाह-एक्स: छिपा हुआ; अतिप्रवाह- y: ऑटो; } .blur {width: 400px; ऊंचाई: 50 पीएक्स; स्थिति: पूर्ण; पृष्ठभूमि रंग: # 000000; -webkit-filter: blur (10px); -एम-फिल्टर: धुंधला (10px); -ओ-फिल्टर: धुंधला (10px); -मोझ-फिल्टर: धुंधला (10px); फ़िल्टर: धुंधला (10px); बाएं: -50px; शीर्ष: -20 पीएक्स; }  

कैसे रखा जाए। ब्लूर तत्व जब मैं स्क्रॉल करता है तो। वाइपर तत्व के अंदर सबसे ऊपर तय होता है। सामग्री तत्व? मुझे लगता है कि jquery scrollTop एक समाधान हो सकता है क्या कोई मुझे बता सकता है कि ऐसा कैसे करें?

ठीक है, अगर आपकी "सामग्री" की स्थिति निर्धारित है और हमेशा वही मैं एक निश्चित कंटेनर में अपने कलंक को लपेटता हूं जैसे:

  .container-blur {position: fixed; चौड़ाई: 282px; शीर्ष: 100px; छिपा हुआ सैलाब; ऊँचाई: 50px; }