स्क्रॉल के बाद जावास्क्रिप्ट चिपचिपा div

Question

यह सवाल शायद यहां कई लोगों के लिए बेवकूफ हो सकता है। मैं शुद्ध जेएस में स्क्रॉल के बाद चिपचिपा div बना रहा हूँ। कुछ लोग इसे jQuery में बनाने की सलाह दे सकते हैं लेकिन मुझे इसमें रूचि नहीं है। मुझे जो चाहिए वह this जैसा कुछ है। यहां div सभी तरह से शीर्ष पर चलता है लेकिन मुझे 60px शीर्ष होने की आवश्यकता है। मैंने एक स्क्रिप्ट बनाई लेकिन यह काम नहीं कर रहा है। क्या कोई इसे हल करने में मेरी सहायता कर सकता है?

मेरा कोड यहां है।

एचटीएमएल

<div id="left"></div> 
<div id="right"></div> 

सीएसएस

#left{ 
    float:left; 
    width:100px; 
    height:200px; 
    background:yellow; 
} 

#right{ 
    float:right; 
    width:100px; 
    height:1000px; 
    background:red; 
    margin-top:200px; 
} 

जे एस

window.onscroll = function() 
{ 
    var left = document.getElementById("left"); 



    if (left.scrollTop < 60 || self.pageYOffset < 60) { 
     left.style.position = 'fixed'; 
     left.style.top = '60px'; 
    } else if (left.scrollTop > 60 || self.pageYOffset > 60) { 
     left.style.position = 'absolute'; 
     left.style.margin-top = '200px'; 
    } 

} 

यह मैं क्या हासिल करने की जरूरत है। बाएं div में पृष्ठ लोड पर margin-top:200px और position:absolute होना चाहिए। उपयोगकर्ता स्क्रॉल पृष्ठ पर, बाएं div स्क्रॉल करना चाहिए और जब यह top:60px; तक पहुँच जाता है में अपनी स्थिति और मार्जिन टॉप position:fixed में बदल जानी चाहिए और margin-top:60px;

यहाँ FIDDLE

Answer 1

सीएसएस

#left { 
    float:left; 
    width:100px; 
    height:200px; 
    background:yellow; 
    margin:200px 0 0; 
} 
#left.stick { 
    position:fixed; 
    top:0; 
    margin:60px 0 0 
} 

जोड़ा है एक छड़ी वर्ग, इसलिए जावास्क्रिप्ट को बहुत अधिक काम नहीं करना पड़ता है।

जे एस

// set everything outside the onscroll event (less work per scroll) 
var left  = document.getElementById("left"), 
    // -60 so it won't be jumpy 
    stop  = left.offsetTop - 60, 
    docBody = document.documentElement || document.body.parentNode || document.body, 
    hasOffset = window.pageYOffset !== undefined, 
    scrollTop; 

window.onscroll = function (e) { 
    // cross-browser compatible scrollTop. 
    scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop; 

    // if user scrolls to 60px from the top of the left div 
    if (scrollTop >= stop) { 
    // stick the div 
    left.className = 'stick'; 
    } else { 
    // release the div 
    left.className = ''; 
    } 
} 

WORKING JSFIDDLE