Scroll Sticky

sticky scroll

by Giray Sam

HTML

<div id="scbox">aaa</div>
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
<div id="box">
    <div>box box box</div>
</div>
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />
dgdfgd
<br />

CSS

#scbox {
    position: fixed;
    right: 0px;
    top: 0px;
    background: #000;
    color: #FFF;
    padding: 10px;
}
#box {
    position: relative;
    background: red;
    top: 0px;
    color: #FFF;
    width: 100%;
}
#box div {
    padding: 10px;
}

JavaScript

// get box div position
var box = document.getElementById('box').offsetTop;

window.onscroll = function(){
    
    // get current scroll position
    var scroll_top = document.body.scrollTop || document.documentElement.scrollTop;
    
    document.getElementById('scbox').innerText = scroll_top + ' ' + box;
    
    // if current scroll position >= box div position then box position fixed
    if(scroll_top >= box)
        document.getElementById('box').style.position = 'fixed';
    else
        document.getElementById('box').style.position = 'relative';

    
}