Javascript sticky div after scroll

Question

This question maybe stupid for many here. I am making sticky div after scroll in pure JS. Some people may advice to make it in jQuery but i am not interested in it. What i need is something similar to this. Here the div moves all the way to top but i need it to have 60px top. I made a script but it not working. Can anyone help me solve this?

Here is my code.

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

}

This what i need to achieve. The left div has to have margin-top:200px and position:absolute on page load. When the user scrolls the page, the left div should scroll and when it reaches top:60px; its position and margin-top should change to position:fixed and margin-top:60px;

Here is the FIDDLE

JavaScript is case-sensitive. `document.getElementByID` is incorrect. It should be `document.getElementById`. And you have a rogue `,` at the end of that line. And you didn't define a variable called `left`. You probably meant to use the string `"left"` — Ian, Jul 27 '13 at 02:55
See http://jsfiddle.net/bud4S/1/ for a fixed version with the above commenter's fixes. — mash, Jul 27 '13 at 02:58
your question doesn't make sense. especially the last paragraph. — Jay Harris, Jul 27 '13 at 03:27
I want it to work like this http://jsbin.com/omanut/2 . But it has to have `margin-top:60px;` — Kishore, Jul 27 '13 at 03:29
take a look at [this.](http://jsfiddle.net/bud4S/3/) what you looking for ? — Jay Harris, Jul 27 '13 at 03:30
the left div should have the same margin-top as the right div at start. and when the page is scrolled, the left div should have margin-top 60px; and position fixed. — Kishore, Jul 27 '13 at 03:33
disregard the last link [this is it](http://jsfiddle.net/bud4S/4/) — Jay Harris, Jul 27 '13 at 03:33
i dont want the left div to move all the way to top. top has to be 60px; take a look at this jsbin.com/omanut/2 and this http://jsbin.com/uxizab/2 scroll the page — Kishore, Jul 27 '13 at 03:34
@Kishore just when user scrolls and not dependent on position of the scroll ? — Jay Harris, Jul 27 '13 at 03:35
take a look at the links i gave in comment scroll the page. you will know what i want — Kishore, Jul 27 '13 at 03:36
@Kishore well based on what you said, you can check my solution below see if it solves your unique problem. — Jay Harris, Jul 27 '13 at 03:52

Jay Harris · Accepted Answer · 2014-03-02T05:22:39.900

CSS

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

added a stick class, so javascript doesn't have to do too much work.

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

Javascript sticky div after scroll

1 Answers1

Linked