JavaScript sticky div po przewinięciu
To pytanie może być głupie dla wielu tutaj. Robię lepkie div po przewinięciu w czystym JS. Niektórzy ludzie mogą doradzić, aby zrobić to w jQuery, ale nie jestem tym zainteresowany. Potrzebuję czegoś podobnegoto. Tutaj div porusza się aż do samego początku, ale potrzebuję go, aby mieć szczyt 60px. Zrobiłem skrypt, ale to 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 muszę osiągnąć. Lewy div musi miećmargin-top:200px
iposition:absolute
na stronie ładowania. Gdy użytkownik przewija stronę, lewy div powinien się przewijać i gdy osiągnietop:60px;
jego pozycja i margines powinny zmienić się naposition:fixed
imargin-top:60px;
Tutaj jestSKRZYPCE