JavaScript lepki div po przewinięciu

Question

To pytanie może być głupie dla wielu tutaj. Robię lepki div po przewinięciu w czystym JS. Niektórzy ludzie mogą doradzić, aby zrobić to w jQuery, ale nie jestem nim zainteresowany. Potrzebuję czegoś podobnego do this. Tutaj div przesuwa się aż do góry, ale potrzebuję go mieć 60 pikseli. Zrobiłem scenariusz, ale nie działa. Czy ktoś może mi pomóc rozwiązać ten problem?

Oto mój kod.

HTML

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

CSS

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

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

JS

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

} 

to co potrzebne do osiągnięcia. Lewy div musi mieć margin-top:200px i position:absolute podczas ładowania strony. Gdy użytkownik przewija stronę, w lewo div należy przewinąć i gdy osiągnie top:60px; jego pozycja i margin-top powinien zmienić się position:fixed i margin-top:60px;

Oto FIDDLE

Answer 1

CSS

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

dodany klasa patyk, więc javascript nie musi wykonywać zbyt wiele pracy.

JS

// 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