Javascript sticky div после прокрутки

этот вопрос может быть глупым для многих здесь. Я делаю липкий div после прокрутки в чистом JS. Некоторые люди могут посоветовать сделать это в jQuery, но меня это не интересует. Мне нужно что-то похожее на этой. Здесь div движется до самого верха, но мне нужно, чтобы он имел 60px top. Я сделал сценарий, но он не работает. Кто-нибудь может помочь мне решить эту проблему?

вот мой код.

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

}

это то, что мне нужно достичь. Левый div должен иметь margin-top:200px и position:absolute при загрузке страницы. Когда пользователь прокручивает страницу, левый div должен прокручиваться и когда он достигает top:60px; его позиция и маржа-top должны измениться на position:fixed и margin-top:60px;

здесь скрипка

6
javascript scroll sticky

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
}

добавлен класс stick, поэтому javascript не должен делать слишком много работы.

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

РАБОЧИЙ JSFIDDLE

17