Javascript липкий div после прокрутки
Этот вопрос может быть глупым для многих здесь. Я делаю липкий div после прокрутки в чистом JS. Некоторые люди могут посоветовать сделать это в jQuery, но мне это не интересно. Мне нужно что-то похожее наэтот, Здесь div движется до самого верха, но мне нужно, чтобы у него было 60px. Я сделал скрипт, но он не работает. Может кто-нибудь помочь мне решить это?
Вот мой код
HTML
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';
}
}
Это то, что мне нужно для достижения. Левый div должен иметьmargin-top:200px
а такжеposition:absolute
на странице загрузки. Когда пользователь прокручивает страницу, левый div должен прокручиваться, и когда он достигаетtop:60px;
его позиция и маржинальная вершина должны измениться наposition:fixed
а такжеmargin-top:60px;
ЗдесьFIDDLE